这是用于在我的 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>

是否有任何明显的跳出可能导致此问题？

Edit1:顺便说一句，当我尝试这个上传表单时 - http://jsfiddle.net/Atpgu/1/ - 添加文件按钮在 Chrome 和 FF 上都为我触发 - 所以我怀疑它与我的 JS 有关，我只是不知道是什么。

Edit2:这就是 compv 的定义。我知道它有点冗长，我打算减少它 - 但决定不冒删除重要内容的风险。

var compv = {
    exists: true,
    tools: { exists: true,
         csrf_param : null,
         csrf_token : null},
    comments: { exists: true,
            updateView: null,
            selectImage: null,
            upvote:null,
            downvote:null,
            showVotes:null,
            getUploadID: function(element){
                    return $(element).parents("li").attr("data-upload-id");
                }},
    steps: { exists: true,
         selectFn:{},
         selectedClass: "selected-step",
         selectableClass: "selectable-step",
         selectedClient: { element: null,
                           id: null,
                   stepType: "client",
                   ajaxSuccess: null },
         selectedProject: { element: null,
                    id: null,
                    stepType: "project",
                            ajaxSuccess: null },
            selectedStage: { element: null,
                  id: null,
                  stepType: "stage",
                  ajaxSuccess: null,
                  getID: function(){
                    return compv.steps.selectedStage.id;
                        },
                  displayCompare: function(){
                    window.open($(this).attr('data-url'), "_blank");
                    }},
             selectedUpload: { element: null,
                  id: null,
                  stepType: "image",
                      primeUploadDisplay: null,
                  ajaxSuccess: null,
                  uploader: null,
                  noCloseDialog: false} }
};

最佳答案

Plupload 无法正确呈现隐藏的元素，这就是它应该在显示后刷新的原因。 在给定的例子中，打开DIALOG后，应该添加几行代码:

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

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

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

关于javascript - 为什么 Plupload 中的 'add files' 按钮不会在最新的 Chrome 或 OS X 上的 FF 中触发？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5471141/