jQuery AJAX 文件上传跨浏览器支持
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2108417/
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
jQuery AJAX Fileupload crossbrowser support
提问by Zenon
I'm currently working on an AJAX file upload script, which works like a charm in Firefox but doesn't work in IE.
我目前正在开发一个 AJAX 文件上传脚本，它在 Firefox 中就像一个魅力，但在 IE 中不起作用。
this is the basic HTML I'm using:
这是我正在使用的基本 HTML：
<form >
<input type="file" name="FileFields" id="FileFields"/>
<button type="button" onclick="uploadFile();" id="uploadButton">Upload</button>
<ul id="files"/>
... other form elements ...
</form>
<div id="fileUploadDiv"/>
this is the uploadFile function:
这是上传文件功能：
function uploadFile()
{
//we don't want more then 5 files uploaded
if($('#files li').size() >= 5)
{
return;
}
//disable the upload button
$('#uploadButton').attr('disabled','disabled');
//show loading animation
$('#files').append(
$('<li>')
.attr('id','loading')
.append(
$('<img>').attr('src','/images/loading.gif')
)
.addClass('loading')
);
//add all neccessary elements (the form and the iframe)
$('#fileUploadDiv').append(
$('<form action="/uploadFile" method="post" id="fileUploadForm">')
.attr('enctype','multipart/form-data')
.attr('encoding', 'multipart/form-data')
.attr('target', 'upload_frame')
.append(
$('#FileFields').clone()
.css('visibility','hidden')
)
.append(
$('<iframe>').attr('name','upload_frame')
.load(function(){finishedPostingFile();})
.attr('id','upload_frame')
.attr('src','')
.css({
'width':'0px',
'height':'0px',
'border':'0px none #fff'
})
)
);
//start uploading the file
$('#fileUploadForm').submit();
}
and finishedPostingFile() would be the call back function once the iframe has finished posting/loading.
一旦 iframe 完成发布/加载，finishedPostingFile() 将是回调函数。
Now, this works like a charm in Firefox but doesn't work in IE. I already figured out that IE needs attr('encoding',...)instead of attr('enctype',...)and I also tried it without creating the form and iframe on the fly by writing those elements as plain html, which didn't really make a difference.
现在，这在 Firefox 中就像一个魅力，但在 IE 中不起作用。我已经发现 IE 需要attr('encoding',...)而不是，attr('enctype',...)我也尝试了它，而不是通过将这些元素编写为纯 html 来动态创建表单和 iframe，这并没有真正产生什么区别。
IE (IE8, to be concrete, haven't tested it in < 8) doesn't give an error and the loading animation just keeps on spinning, without the file ever being uploaded... Anyone got any idea on how to make this work?
IE（IE8，具体来说，尚未在 < 8 中对其进行测试）不会出现错误，并且加载动画只是继续旋转，而没有上传文件......任何人都知道如何制作这个工作？
采纳答案by Luca Matteis
Why not use this, http://valums.com/ajax-upload/?
为什么不使用这个，http://valums.com/ajax-upload/？
Or at least look at their code to see the right way for creating a Form that will work cross-browser.
或者至少查看他们的代码以了解创建可跨浏览器工作的表单的正确方法。
回答by Sunny Chevli
I did this change at line 10:
我在第 10 行做了这个改动：
and it worked
它起作用了
if(window.ActiveXObject) {
var io;
try
{
//Your JavaScript code will be here, routine JavaScript statements area.
io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');
}
catch(err)
{
//JavaScript Errors handling code will be here
io=document.createElement("iframe");
io.setAttribute("id",frameId);
io.setAttribute("name",frameId);
}
回答by Frank Adrian
I am doing a very similar thing, I had the problem that just IE8 did not upload the files to my server; got a IniSizeError.
我正在做一个非常相似的事情，我遇到了 IE8 没有将文件上传到我的服务器的问题；得到一个 IniSizeError。
My solution was adding this line:
我的解决方案是添加这一行：
form.encoding = "multipart/form-data";
to my form when created. Enctype attribute is also required.
创建时到我的表单。Enctype 属性也是必需的。
回答by marc.d
here is a working example for Firefox/IE7/IE8, i am currently using a jqueryUI dialog for the progressbar.
这是 Firefox/IE7/IE8 的一个工作示例，我目前正在使用 jqueryUI 对话框作为进度条。
just replace "DocumentUploadForm" with the Id of your form
只需将“DocumentUploadForm”替换为您表单的 ID
$(document).ready(function() {
$("#DocumentUploadForm").submit(function(data) {
data.preventDefault;
var submittingForm = $("#DocumentUploadForm");
var frameName = ("Upload");
var uploadFrame = $("<iframe name=\"" + frameName + "\" />");
uploadFrame.css("display", "none");
$(".document_upload_progress").dialog({
autoOpen: true,
bgiframe: true,
resizable: false,
height: 150,
width: 350,
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
open: function() {
$(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar-close").remove();
},
close: function() {
$(".document_upload_progress").dialog("destroy");
}
});
uploadFrame.load(function(data) {
//submit complete
setTimeout(function() { uploadFrame.remove(); }, 100);
$('#document_upload_dialog').dialog('close');
});
$("body:first").append(uploadFrame);
//setup complete
submittingForm.attr("target", frameName);
});
});
hth
第
回答by Tahir Akhtar
I guess your frame is never getting appended to DOM in IE. Atleast if the HTML you posted is complete. As it doesn't contain any div with id=fileUploadDiv
我猜你的框架永远不会被附加到 IE 中的 DOM。至少如果您发布的 HTML 是完整的。因为它不包含任何 id=fileUploadDiv 的 div
You can confirm this by adding the iframe with non-zero width and height and set the src to a correct URL.
您可以通过添加具有非零宽度和高度的 iframe 并将 src 设置为正确的 URL 来确认这一点。
回答by Torben
Thanks to everybody.
感谢大家。
I now use the script from http://www.uploadify.com.
我现在使用来自http://www.uploadify.com的脚本。
Great script with a lot of customizable functions...
很棒的脚本，有很多可定制的功能......
