javascript 为什么 Plupload 中的“添加文件”按钮不会在 OS X 上的最新 Chrome 或 FF 中触发？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5471141/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why does 'add files' button in Plupload not fire in latest Chrome or FF on OS X?
提问by marcamillion
This is the code that is used to trigger Plupload in my Rails App:
这是用于在我的 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>
Is there anything obvious that jumps out that could be causing this ?
是否有任何明显的跳出可能导致这种情况？
Edit1: Btw, when I try this upload form - http://jsfiddle.net/Atpgu/1/- the add files button fires for me on both Chrome & FF - so I suspect it has something to do with my JS, I just don't know what.
编辑 1：顺便说一句，当我尝试此上传表单时 - http://jsfiddle.net/Atpgu/1/- 在 Chrome 和 FF 上都会为我触发添加文件按钮 - 所以我怀疑它与我的 JS 有关系，我只是不知道是什么。
Edit2: This is what the definition of compvis. I know it's a bit verbose, and I was going to reduce it - but decided not to at the risk of removing something important.
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} }
};
回答by Deele
Plupload is not rendering correctly for hidden elements, that is why it should be refreshed after shown. In given example, after DIALOG is opened, there should be added few lines of code:
Plupload 没有为隐藏元素正确渲染，这就是为什么它应该在显示后刷新。在给定的例子中，打开 DIALOG 后，应该添加几行代码：
var uploader = $('#uploader').pluploadQueue();
uploader.refresh();
I noticed, that in chrome, it has problems to set z-index correctly for input container. To workaround that, just add another line after previous two:
我注意到，在 chrome 中，为输入容器正确设置 z-index 存在问题。要解决此问题，只需在前两行之后添加另一行：
$('#uploader > div.plupload').css('z-index','99999');
回答by Lucian Depold
You can solve this problem with Chrome easier by setting the css of your browse_button (= Select Files Button) to a higher z-index (z-index:99999) !
您可以通过将您的 browse_button（= 选择文件按钮）的 css 设置为更高的 z-index (z-index:99999) 来更轻松地使用 Chrome 解决此问题！
Lucian
卢西安
回答by Zappa
I know this is an old question but it seems that the z-index issue is still around in the later versions of plupload (1.5.2).
我知道这是一个老问题，但似乎 z-index 问题在 plupload (1.5.2) 的更高版本中仍然存在。
The problem is caused by code in plupload.html5.jswhich changes the z-index of the "Add Files" button specifically for Webkit browsers and in doing so breaks things:
该问题是由代码引起的，在plupload.html5.js该代码中，专门针对 Webkit 浏览器更改了“添加文件”按钮的 z-index，这样做会破坏一些事情：
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
});
If you view the DOM you will see that style="z-index: 0;"is added to the #uploader_browseranchor element, and the div containing the "Add Files" button gets a z-index of -1 which effectively hides it behind the page (depending on your pages z-index of course).
如果您查看 DOM，您将看到它style="z-index: 0;"被添加到#uploader_browser锚元素中，并且包含“添加文件”按钮的 div 的 z-index 为 -1，这有效地将其隐藏在页面后面（取决于您的页面 z-index of课程）。
To fix this I set the zIndex value in the file mentioned above to something higher than the page that the plupload div was being displayed on.
为了解决这个问题，我将上面提到的文件中的 zIndex 值设置为高于显示 plupload div 的页面。
回答by Peto Kovi Ková?
Deele's solution with css is good but little better is to do it this way:
Deele 的 css 解决方案很好，但更好的是这样做：
$('#uploader > div.plupload input').css('z-index','99999');
That way hover of button will be not broken...
这样按钮的悬停不会被打破......
