Javascript 为什么'；添加文件'；Plupload中的按钮在OS X上的最新Chrome或FF中未启动？

这是用于在我的Rails应用程序中触发Plupload的代码：

<% content_for :deferred_js do %>
    $("#uploader").pluploadQueue({  
        runtimes : 'gears,html5,flash,browserplus,silverlight,html4',
           url : '/uploads.js',
           //browse_button : 'pickfiles',
           max_file_size : '10mb',
           chunk_size : '2mb',
           unique_names : false,
           container: 'uploader',
           autostart: true,
           //RoR - make sure form is multipart
           //multipart: true,

           // Specify what files to browse for
           filters : [
             {title : "Image files", extensions : "jpg,gif,png,bmp"}
           ],

            // PreInit events, bound before any internal events
            preinit : {

        UploadFile: function(up, file) {
    up.settings.multipart_params = {"upload[stage_id]" :    compv.steps.selectedStage.getID(), "authenticity_token" : compv.tools.csrf_token()};
                }
            },

            // Post init events, bound after the internal events
            init : {

                FilesAdded: function(up, files) {
                    // Called when files are added to queue
                    up.start();
                },


                FileUploaded: function(up, file, info) {
                    // Called when a file has finished uploading
                    console.log('[FileUploaded] File:', file, "Info:", info);
                    info.responseText = info.response;
                    compv.updateStepView('upload', info);
                    $('tr[data-upload] td.selectable-step').each(function(index){
                        compv.steps.selectedUpload.primeUploadDisplay($(this));
                    });
                },

                Error: function(up, args) {
                    // Called when an error has occured
                    up.stop();
                    compv.tools.clientError();
                }
            },

           // Flash settings
           flash_swf_url : '/plupload/js/plupload.flash.swf',

           // Silverlight settings
           silverlight_xap_url : '/plupload/js/plupload.silverlight.xap'
         });
         compv.steps.selectedUpload.uploader = $('div#uploader').pluploadQueue();
         //compv.steps.selectedUpload.uploader.init();

         // Client side form validation
         $('form#new_upload').submit(function(e) {
           var uploader = $('#uploader').pluploadQueue();

           // Validate number of uploaded files
           if (uploader.total.uploaded == 0) {
             // Files in queue upload them first
             if (uploader.files.length > 0) {
               // When all files are uploaded submit form
               uploader.bind('UploadProgress', function() {
                 if (uploader.total.uploaded == uploader.files.length)
                   $('form').submit();
               });

               uploader.start();
             } else
                $('div#upload-empty-dialog').dialog("open");
             e.preventDefault();
           }
      });
    $('div#upload-empty-dialog').dialog({modal:true, autoOpen: false, minWidth: 325, buttons: { "Ok": function() { $(this).dialog("close"); } }});
    $('div#upload-cancel-dialog').dialog({modal:true, autoOpen: false, minWidth: 325});
<% end %>
<div class="dialog" id="upload-empty-dialog" title="No Files">
<p>You must select files to upload first.</p>
</div>
<div class="dialog" id="upload-cancel-dialog" title="Cancel Uploading?">
<p>Do you want to stop uploading these images? Any images which have not been uploaded will be lost.</p>
</div>

---

Plupload无法正确渲染隐藏元素，这就是为什么显示后应刷新它的原因。 在给定的示例中，打开对话框后，应添加几行代码：

var uploader = $('#uploader').pluploadQueue();
uploader.refresh();

我注意到，在chrome中，为输入容器正确设置z索引存在问题。要解决此问题，只需在前两行之后添加另一行：

$('#uploader > div.plupload').css('z-index','99999');

---

我知道这是一个老问题，但在plupload（1.5.2）的更高版本中，z索引问题似乎仍然存在

问题是由

plupload.html5.js

中的代码引起的，该代码更改了专门针对Webkit浏览器的“添加文件”按钮的z索引，这样做会破坏以下内容：

zIndex = parseInt(plupload.getStyle(browseButton, 'z-index'), 10);
if (isNaN(zIndex)) {
    zIndex = 0;
}

plupload.extend(browseButton.style, {
    zIndex : zIndex
});

plupload.extend(inputContainer.style, {
    zIndex : zIndex - 1
});

如果查看DOM，您将看到

style=“z-index:0；”

被添加到

#uploader_browser

锚元素中，并且包含“Add Files”按钮的div的z-index为-1，有效地将其隐藏在页面后面（当然取决于页面的z-index）

---

为了解决这个问题，我将上面提到的文件中的zIndex值设置为高于plupload div显示的页面的值。

通过将浏览按钮（=选择文件按钮）的css设置为更高的z索引（z索引：99999），您可以更容易地用Chrome解决这个问题

---

Lucian

Deele的css解决方案很好，但更好的方法是这样做：

$('#uploader > div.plupload input').css('z-index','99999');

---

这样按钮的悬停就不会被破坏…

对于Chrome来说，这实际上是一个功能，不是问题，因为Chrome不需要点击输入来触发文件对话框。因此，输入被移开，以保持按钮和光标可视化的正确动态。实际上，z索引问题是针对包含该输入的容器的。我不知道为什么，但我得到了一个在uploader对象上找不到的刷新方法。如果没有uploader.refresh（）和css z-index修复程序，一切都很好，尽管有很多，uploader.refresh（）是我第一次使用添加文件按钮时的解决方案。：）

uploader.refresh（）

是我的解决方案。请注意，如果您的节目是动画，则需要在动画完成后调用

uploader.refresh（）

。

$('#uploader > div.plupload input').css('z-index','99999');