javascript IE8 上的 FormData ajax 上传 -> 替代方案及其工作原理
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27702418/
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
FormData ajax upload on IE8 -> alternatives and how it works
提问by NeS
I'm tyring to upload a picture with ajax, so I'm using FormData, but it's not working with IE8. I've looked about it and it's not possible to use FormData with IE8, but I've found nothing I've been able to use instead in order to make it work on IE8 and other browser. Could someone tell me what to do please, and how to do it ?
我很想用 ajax 上传图片，所以我使用的是 FormData，但它不适用于 IE8。我已经看过了，它不可能在 IE8 中使用 FormData，但我没有发现我可以使用它来代替它以使其在 IE8 和其他浏览器上工作。有人可以告诉我该怎么做，以及如何做吗？
The form I'm trying to submit
我要提交的表格
<form id="addImgForm" name="addImgForm" method="post" action="#URL(Action('ChiliTest-ImageUpload'))#" enctype="multipart/form-data">
<input id="newImage" type="file" name="newImage">
<input type="hidden" name="MAX_FILE_SIZE" value="12345">
<span id="addImage" class="button-addImage" type="submit"><isTradConstant keyword="l_customizationsChiliEditor_AddImageButtonTitle" template="CustomizationsChiliEditor" init="Ajouter"></span>
</form>
Called on addImgForm submit
调用 addImgForm submit
$.ajax({
url: myUrl,
type: "POST",
data: new FormData($(this).parent()[0]),
contentType : false,
async: false,
processData: false,
cache: false,
success: function(data) {
//do something
}
});
return false;
回答by Rohith K
Ideally when i faced this issue, i checked for FormData in browser and if that returns undefined, then i went for form submission via an iframe.
理想情况下，当我遇到这个问题时，我在浏览器中检查了 FormData，如果返回未定义，则我通过 iframe 进行表单提交。
回答by Rameshwar Vyevhare
We have used jquery pluginfor the same and got resolved this issue.
我们已经使用了jquery 插件并解决了这个问题。
It is too simple just use
太简单了就用
$('#myForm').ajaxForm(function() {
});
instead of below call, it set all options automatically.
而不是下面的调用，它会自动设置所有选项。
$.ajax({
url: myUrl,
type: "POST",
data: new FormData($(this).parent()[0]),
contentType : false,
async: false,
processData: false,
cache: false,
success: function(data) {
//do something
}
});
Hope this will work out, let me know if any hurdles during implementation. Make sure you added jquery plugin before using ajaxform function. Do not need to do anything for other browser it works for IE and other both.
希望这会成功，如果在实施过程中遇到任何障碍，请告诉我。确保在使用 ajaxform 功能之前添加了 jquery 插件。不需要为其他浏览器做任何事情，它适用于 IE 和其他浏览器。
回答by Aminul
You can use [jQuery Form Plugin][1] to upload files via ajax in IE 8 and your example code should be like this:
您可以使用 [jQuery Form Plugin][1] 在 IE 8 中通过 ajax 上传文件，您的示例代码应如下所示：
[1]:
[1]：
$(document).ready(function() {
var options = {
beforeSend: function() {
$("#progress").show();
//clear everything
$("#bar").width('0%');
$("#message").html("");
$("#percent").html("0%");
},
uploadProgress: function(event, position, total, percentComplete) {
$("#bar").width(percentComplete + '%');
$("#percent").html(percentComplete + '%');
},
success: function() {
$("#bar").width('100%');
$("#percent").html('100%');
},
complete: function(response) {
$("#message").html("<font color='green'>" + response.responseText + "</font>");
},
error: function() {
$("#message").html("<font color='red'> ERROR: unable to upload files</font>");
}
};
$("#myForm").ajaxForm(options);
});<script src="http://malsup.github.io/min/jquery.form.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<form id="myForm" action="/demo/Upload" method="post" enctype="multipart/form-data">
<input type="file" size="60" name="myfile">
<input type="submit" value="Ajax File Upload">
</form>
<div id="progress">
<div id="bar"></div>
<div id="percent">0%</div>
</div>
<br/>
<div id="message"></div>