这是用于在我的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和＆amp ;; 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} }
};
答案 0 :(得分：34)
Plupload无法正确显示隐藏元素，这就是为什么它应该在显示后刷新。 在给定的示例中，在打开DIALOG之后，应该添加几行代码：
var uploader = $('#uploader').pluploadQueue();
uploader.refresh();
我注意到，在chrome中，为输入容器正确设置z-index存在问题。要解决这个问题，只需在前两个之后添加另一行：
$('#uploader > div.plupload').css('z-index','99999');
答案 1 :(得分：3)
通过将browse_button（=选择文件按钮）的CSS设置为更高的z-index（z-index：99999），您可以更轻松地解决此问题！
卢西恩
答案 2 :(得分：2)
我知道这是一个老问题，但似乎z-index问题仍然存在于plupload（1.5.2）的更高版本中。
问题是由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锚元素，而包含“添加文件”按钮的div获得的-1的z索引有效地隐藏了它在页面后面（当然取决于你的页面z-index）。
要解决此问题，我将上述文件中的zIndex值设置为高于显示plupload div的页面。
答案 3 :(得分：1)
Deele用css解决方案很好但是用这种方式做得更好：
$('#uploader > div.plupload input').css('z-index','99999');
按钮的悬停方式不会被打破......