Question

我已经阅读了关于在jquery ui对话框中加载plupload小部件的同样问题的所有类似线程，但是没有让它在IE9中工作（FF和Safari都可以正常工作）。

问题是在IE9中，加载了Silverlight版本的plupload，因为IE9不支持html5文件处理。不知何故，“添加文件”按钮不可按，但是“开始上传”按钮是。从我到目前为止所读到的，这是由于UI对话框在我打开之前被隐藏了。有几个人建议使用调用来刷新上传器小部件，但这没什么区别。

相关的Javascript代码如下所示： $（ “＃上传的小部件容器”）。对话框（{ autoOpen：false，显示：“盲目”，隐藏：“折叠”，莫代尔：假的，宽度：660，身高：400，可调整大小：错误 }）;

$("#upload-widget").pluploadQueue({
        runtimes : 'html5,silverlight,flash,browserplus',
        container: 'upload-widget-container',
        url : 'upload.php',
        max_file_size : '100mb',
        chunk_size : '1mb',
        unique_names : true,
        filters : [
            {title : "Image files", extensions : "jpg,gif,png"},
            {title : "Zip files", extensions : "zip"},
            {title : "Bin files", extensions : "bin"}
        ],
        flash_swf_url : '/js/plupload/plupload.flash.swf',
        silverlight_xap_url : '/js/plupload/plupload.silverlight.xap'
    });

    $('.upload-button').live('click', function(e)
        {
            $('#upload-widget-container').dialog("open");
            var uploader = $('#upload-widget').pluploadQueue();

            uploader.bind('StateChanged', function() {
                if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
                    // Done uploading
                    for (var i=0; i < uploader.files.length; i++)
                    {
                        if (uploader.files[i].status == plupload.DONE)
                        {
                            alert(uploader.files[i].id + ' ' + uploader.files[i].name);
                        }
                    }
                }
            });
        }
    );

标记看起来像这样：

<div id="upload-widget-container">
    <div id="upload-widget"></div>
</div>

<a class="upload-button green-button-148" href="#" rel="1234">Upload</a>

有关如何在IE9 / Silverlight中使用此功能的任何想法？如上面的代码所示，刷新plupload对象和设置.plupload div的z-index的行没有什么区别。

更新：它实际上看起来像IE9问题，因为如果我在FF和Safari中使用plupload的silverlight运行时它可以正常工作。所以它是plupload，jquery ui对话框，silverlight和IE9的组合。

更新2：所以我做了一个简单的vanilla测试页面，没有其他标记，css或js。这消除了其他脚本或标记或样式干扰其工作的可能性。但它仍然无法在IE 9（版本：9.0.8112.16421）中使用。

但是，如果我删除包含jQuery UI主题CSS的行，它确实有效，并且可以单击“添加文件”按钮。 有这些新信息的任何新想法？我猜它与UI主题CSS中的显示属性或类似的东西有关。

Answer 1

告诉我一些事情，该按钮是否设置了'plupload_disabled'样式，或者实际上没有附加点击事件？您是否尝试加载对话框然后在chrome或firebug的控制台中执行以下操作：

$('a[id*="browse"]').attr('class','').addClass('plupload_button plupload_start ui-button ui-    widget ui-state-default ui-corner-all ui-button-text-icon-primary');

我正在使用jquery pluploadqueue版本的html4版本，但尝试在控制台中运行该版本以将按钮更改回启用并尝试添加文件。只需将上面的类名与您使用的类名匹配即可。

<强>更新

试试这个：

$('.upload-button').live('click', function(e)
{
    $('#upload-widget-container').dialog("open");
    initUploader($('#upload-widget'));
    var uploader = $('#upload-widget').pluploadQueue();

    uploader.bind('StateChanged', function() {
        if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
            // Done uploading
            for (var i=0; i < uploader.files.length; i++)
            {
                if (uploader.files[i].status == plupload.DONE)
                {
                    alert(uploader.files[i].id + ' ' + uploader.files[i].name);
                }
            }
        }
    });
    $('<div>').delay(1000).queue(function()
    {
        $('div.plupload_buttons').find('a').each(function()
        {
            if($(this).hasClass('plupload_disabled'))
            {
                $(this).attr('class','').addClass('plupload_button plupload_start');

            }
        });
        $(this).dequeue();
    });
    }
 );

Answer 2

也许您可以尝试延迟上传器初始化，直到UI可见。

这可以通过将init代码放入一个单独的函数来完成（不要忘记在关闭对话框时销毁上传器，或者跟踪已经初始化的上传器）

var initUploader = function(uploadWidget)
        {
            $(uploadWidget).pluploadQueue({
            runtimes : 'html5,silverlight,flash,browserplus',
            container: 'upload-widget-container',
            url : 'upload.php',
            max_file_size : '100mb',
            chunk_size : '1mb',
            unique_names : true,
            filters : [
                {title : "Image files", extensions : "jpg,gif,png"},
                {title : "Zip files", extensions : "zip"},
                {title : "Bin files", extensions : "bin"}
            ],
            flash_swf_url : '/js/plupload/plupload.flash.swf',
            silverlight_xap_url : '/js/plupload/plupload.silverlight.xap'
            });
        }

$('.upload-button').live('click', function(e)
    {
        $('#upload-widget-container').dialog("open");
        initUploader($('#upload-widget'));
        var uploader = $('#upload-widget').pluploadQueue();

        uploader.bind('StateChanged', function() {
            if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
                // Done uploading
                for (var i=0; i < uploader.files.length; i++)
                {
                    if (uploader.files[i].status == plupload.DONE)
                    {
                        alert(uploader.files[i].id + ' ' + uploader.files[i].name);
                    }
                }
            }
        });
    }
);

希望这会有所帮助

Answer 3

所以我在摆弄jQuery UI CSS之后终于找到了它。我将.ui-dialog类的overflow属性从隐藏更改为可见，这似乎可以解决问题：

更改此行： /.ui-dialog {position：absolute;填充：.2em;宽度：300px;溢出：隐藏; } /

进入： .ui-dialog {position：absolute;填充：.2em;宽度：300px;溢出：* 粗体 *可见; }

坦率地说，我不确定为什么对话框的溢出属性会导致这种情况发生在IE中，但我现在只是使用这个hack来使它至少工作。感谢IE带走了我生命中的另外几个小时。特别感谢你们帮助我，我会给你一些荣誉。：）

Answer 4

通过在对话框的“open”回调中对对象进行编码，我已成功地在jQuery UI对话框中实现了 pluploadQueue 小部件：

$("#plupload-dialog").dialog({
   autoOpen: false,
   modal: false,  // change this to true for modal, but haven't tested yet
   open: function(event, ui) {
       $("pluploader").pluploadQueue({
           runtimes: '', // add your runtimes here
           url: '',  // add your URL here
           flash_swf_url: '', // path to shockwave component
           silverlight_xap_url: '', // path to silverlight component
           max_file_size: '', // file size option
           filters: [], // filter options
           preinit: {  // preinit callbacks - note do not include separate init for pluploadQueue
               Init: function(up, info) {
               },
               UploadFile: function(up, file) {
               },
               FilesAdded: function(up, files) {
                   // do some stuff

                   // hide browse button
                   $(up.settings.browse_button).hide();

               }
               FilesRemoved: function(up, files) {
                   // do some stuff

                   // show browse button
                   $(up.settings.browse_button).show();

                   // refresh the object
                   $("#pluploader").pluploadQueue().refresh();

               }
               Error: function(up, args) {
               }
           } 
       });
   }
});

不确定这是您正在寻找的，但在某些方面可能会有所帮助。

在jquery ui对话框中的plupload小部件

4 个答案: