jquery ui对话框中的plupload小部件

Question

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

问题是，在IE9中，pluginload的Silverlight版本被加载，因为IE9不支持html5文件处理。不知何故，“添加文件”按钮不可按，然而，“启动上传”按钮是。从我迄今为止阅读的内容来看，这是由于在打开UI对话框之前被隐藏导致的。有几个人建议使用调用来刷新上传器小部件，但这没有什么区别。

相应的JavaScript代码如下： $（ “＃上传的小部件容器”）对话框（{ 的AutoOpen：假的， 显示： “盲”， 躲： “折叠”， 模式：假， width：660， height：400， resizable：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的行，它可以工作，并且Add Files按钮是可单击的。 有了这些新信息的新想法吗？我猜它必须在UI主题CSS或类似的显示属性。

Answer 1

所以我终于在摆弄jQuery UI CSS后找到它。我将.ui对话框类的溢出属性从隐藏变为可见，这似乎是诀窍：

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

into this： .ui-dialog {position：absolute;填充：0.2em;宽度：300px;溢出：* 加粗 *可见; }

非常坦率地说，我不知道为什么对话框的溢出属性导致这种情况发生在IE中，但我现在只是使用这个黑客，至少使它工作。感谢IE取消了我生命中的几个小时。特别感谢你们帮助我，我会给你一些荣誉。 :)

Answer 2

告诉我一些事情，该按钮是否设置了'plupload_disabled'风格或者实际上没有附加点击事件？您是否尝试加载你的对话框，然后在铬或萤火的控制台做这样的事情：

$('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的版本，但试运行，在控制台更改按钮回启用并尝试添加文件。只需将上面的类名匹配到您使用的类名即可。

UPDATE

试试这个：

$('.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 3

也许你可以试试你的延迟初始化上传直到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); 
        } 
       } 
      } 
     }); 
    } 
); 

希望这将帮助

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

不知道这是什么你正在寻找，但可能会有所帮助。