Plupload & jQuery 在 IE 中不起作用答案

【问题标题】：Plupload & jQuery not working in IEPlupload & jQuery 在 IE 中不起作用
【发布时间】：2015-07-10 00:45:22
【问题描述】：

Plupload 可在所有浏览器栏 IE 中运行。在 IE 中按下 #photo-upload 链接后，文件浏览器无法打开。 uploader 的实例肯定是正确创建的 - 使用开发工具检查。

非常感谢任何解决方案！

这是我们用来创建上传器的脚本：

        var uploader = new plupload.Uploader({
            runtimes : 'gears,html5,flash,silverlight,html4',
            browse_button : 'photo-upload',
            container : 'img-container',
            url : 'productPhoto.php?id=<?=$_GET["id"];?>',
            max_file_size : '5mb',
            flash_swf_url : '/dev/plupload/js/plupload.flash.swf',
            silverlight_xap_url : '/dev/plupload/js/plupload.silverlight.xap',
            unique_names : true,
            filters : [{title : "Image files", extensions : "jpg,gif,png"}],
            multipart_params: {type:1},

            // Post init events, bound after the internal events
            init : {
                UploadProgress: function(up, file) {
                    // Called while a file is being uploaded
                    $("#bar").css("width",file.percent+"%");
                },
                FilesAdded: function(up, files) {
                    $(".progress").slideDown();
                    uploader.start();
                    up.refresh(); // Reposition Flash/Silverlight
                },
                UploadComplete: function(up, file, info) {
                    // Called when a file has finished uploading
                    setTimeout(function(){
                        $(".progress").slideUp();
                        $("#bar").css("width","0");
                        document.location.reload();
                    },2000);
                },
                Error: function(up, args) {
                    // Called when a error has occured
                    alert(args);
                    up.refresh(); // Reposition Flash/Silverlight
                }
            }
        });
        uploader.init();

【问题讨论】：

是否出现任何错误？你的代码看起来不错。 #photo-uploadhtml和绑定方法在哪里？
没有报错，好像纯粹是Plupload的browse_button的绑定。
此代码是位于按钮的 html 声明上方还是下方？此代码是否在 $(document).ready 上执行？
在页面底部。代码初始化良好（Flash 运行时已正确创建）

标签： jquery plupload

【解决方案1】：

链接位于下拉列表中的问题 - 在开始时隐藏。链接必须可见。

【讨论】：

+1。感谢您分享您的解决方案，尼克，它为我解决了同样的问题。我在页面加载时将容器的display 属性设置为none，这导致plupload 的浏览按钮不起作用。
很高兴你发现这很有帮助@MariusSchulz！
谢谢@NickPrice，您为我节省了数小时的调试时间

【解决方案2】：

我可以建议避免将您的上传控件放在隐藏的容器中。

<div class="container" style="display:none">
    <a id="pickfiles" href="#">[Select files]</a>
    <a id="uploadfiles" href="#">[Upload files]</a>
</div>

在上面的例子中，容器 div 有一个样式元素声明display:none 属性。这就是它在 IE 中不起作用的原因。

只需将其更改为display:block 或删除样式元素即可。

【讨论】：

【解决方案3】：

在 IE 8 中页面加载时隐藏 plupload div 时遇到了同样的问题。我选择将 div 绝对定位在屏幕之外，而不是 display:none，然后在需要时传入新的顶部/左侧坐标：

    #plupload {
        display: block;
        position:absolute;
        top:-999px;
        left:-999px;
        background:#fff;
        border:1px solid #c8c8c8;
        padding:10px;
        z-index: 951;
    }

    $('#some-button-to-open-plupload-widget').button().click(function() {
         var css = {"top":"175px", "left":"175px"};
         $("#plupload").css(css);
    });

    $('#some-button-to-close-plupload-widget').button().click(function() {
         var css = {"top":"-999px", "left":"-999px"};
         $("#plupload").css(css);
    });

    <div id="plupload">
       <a href="" class="ui-icon ui-icon-close" id="close"></a>
       <div id="uploader" style="display:block">
           <p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
       </div>    
    </div>

【讨论】：