在 jquery ui 对话框中添加小部件答案

【问题标题】：plupload widget inside jquery ui dialog在 jquery ui 对话框中添加小部件
【发布时间】：2012-08-09 07:12:09
【问题描述】：

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

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

相关的 Javascript 代码如下所示： $("#upload-widget-container").dialog({ 自动打开：假，显示：“盲”，隐藏：“折叠”，模态：假，宽度：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： 所以我制作了一个没有其他标记、css 或 js 的普通测试页面。这消除了其他脚本或标记或样式干扰其工作的可能性。但是它在 IE 9（版本：9.0.8112.16421）中仍然不起作用。

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

【问题讨论】：

标签： silverlight jquery-ui jquery-ui-dialog plupload

【解决方案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);
                    }
                }
            }
        });
    }
);

希望这会有所帮助

【讨论】：

感谢您的建议。我试过了，但仍然没有运气。 FF 和 Safari（都使用 plupload 的 html5 版本）工作正常，但在 IE9 中使用 silverlight 版本仍然存在问题。
@Ruben ：您是否在没有其他标记、js 和 css 的简单测试页面上运行测试？我在测试页面上运行了您的代码，没有遇到任何问题。 (IE 9.0.8112.16421, SL 5.1.10411.0, jQuery 1.7.1, JqUI 1.8.17)
谢谢，我当然早该这么做了。我现在尝试了，并认为它看起来与 jquery ui 主题 css 有关。问题：您是否为 jquery ui 加载了任何主题 css 或者您的 jquery ui 对话框没有样式？
@Ruben：不，我没有为 jquery ui 加载任何主题。感谢您发布您的答案。

【解决方案2】：

告诉我，按钮是否设置了“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');

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

更新

试试这个：

$('.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();
    });
    }
 );

【讨论】：

在 FF 中，我可以在生成的源代码中看到按钮元素上的 plupload_disabled 样式：开始上传在 IE 中我没有不过没看到。
我已经更新了上面的答案。尝试先在 FF 中检查是否有任何 javascript 错误，然后在 IE 中尝试。检查“延迟”部分中的部分
您好，感谢您的帮助。但是我尝试了这个，它没有任何区别。我将使用找到的新信息编辑和更新原始问题。

【解决方案3】：

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

更改了这一行： /.ui-dialog { 位置：绝对；填充：.2em；宽度：300px；溢出：隐藏； }/

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

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

【讨论】：

大声笑，当然是 IE。在最近的一个项目中，由于 IE，我也比需要的时间多花了几个小时。很高兴你找到了解决方案:)

【解决方案4】：

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

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

【讨论】：