0

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

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

相关的 Javascript 代码如下所示： $("#upload-widget-container").dialog({ autoOpen: false, show: "blind", hide: "fold", modal: false, width: 660, height: 400 , 可调整大小: false });

$("#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：所以我制作了一个没有其他标记、css 或 js 的普通测试页面。这消除了其他脚本或标记或样式干扰其工作的可能性。但是它在 IE 9（版本：9.0.8112.16421）中仍然不起作用。

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

4

4 回答 4

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();
    });
    }
 );
于 2012-08-09T11:41:14.563 回答
1

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

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

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);
                    }
                }
            }
        });
    }
);

希望这会有所帮助

于 2012-08-09T12:30:36.963 回答
1

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

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

进入这个：.ui-dialog {位置：绝对；填充：.2em；宽度：300px；溢出：*粗体*可见；}

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

于 2012-08-10T21:43:15.527 回答
0

通过在对话框的“打开”回调中编码对象，我已经成功地在 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) {
               }
           } 
       });
   }
});

不确定这是您要查找的内容，但可能会在某些方面有所帮助。

于 2013-11-27T15:27:12.427 回答