jQuery ajax，发送带有输入类型文件和 Json 的表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17718445/
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, send form with input type file and Json
提问by Clément Andraud
I have a form with several inputs and other field.
我有一个包含多个输入和其他字段的表单。
I have a save button, and when I click, I send the form with ajax with jQuery :
我有一个保存按钮，当我点击时，我使用 jQuery 发送带有 ajax 的表单：
$.ajax({
type: "POST",
dataType: "json",
url: $('#ajaxUrl').val(),
data: "action=save&" + form.serialize()
});
So, when I have only simple input like text, select etc.. it's ok. But if I have an input type file, I can't retrieve my file. $_FILES is always empty.
所以，当我只有简单的输入时，比如文本、选择等......没关系。但是如果我有一个输入类型文件，我就无法检索我的文件。$_FILES 始终为空。
How can I do that as simply as possible ?
我怎样才能尽可能简单地做到这一点？
Edit : I don't want to use a plugin :)
编辑：我不想使用插件:)
回答by HuckFin.7b
Implementation for ASP.NET MVC:
ASP.NET MVC 的实现：
To start making your form-wrapper :
开始制作你的表单包装器：
<form id="inputform">
<input class="hide" type="file" name="file" id="file" />
</form>
Сreate a client-handler to send:
创建一个客户端处理程序以发送：
$("#yourButton").bind('click', function () {
var data = new window.FormData($('#inputform')[0]);
$.ajax({
xhr: function () {
return $.ajaxSettings.xhr();
},
type: "POST",
data: data,
cache: false,
contentType: false,
processData: false,
url: "@Url.Action("MethodName", "ControllerName")",
success: function () { },
error: function () { },
});
});
Do handler on the server side (controller):
在服务器端（控制器）做处理程序：
public ActionResult MethodName(HttpPostedFileWrapper file) {
var img = Image.FromStream(file.InputStream);
....
return ..;
}
I hope this will help you save time ;)
我希望这会帮助你节省时间;)
回答by instanceof me
form.serializedoes not manage file inputs. You'll have to an XMLHttpRequest with formDataas adeneo suggests, see example usage here. For older browsers, there are solutions using iframe and POSTing the form with the iframe as target. Some jquery plugins will do all that for you, like, say, JQuery-File-Upload(but plenty of others exist).
form.serialize不管理文件输入。您必须formData按照 adeneo 的建议使用XMLHttpRequest ，请参阅此处的示例用法。对于较旧的浏览器，有使用 iframe 并以 iframe 作为目标 POST 表单的解决方案。一些 jquery 插件会为你做这一切，比如，JQuery-File-Upload（但还有很多其他插件）。
回答by marlo
I found this little "vanilla" frameworkby querying "Using FormData Objects" on google.
我通过在 google 上查询“Using FormData Objects”找到了这个小小的“vanilla”框架。
used by:
使用人：
AJAXSubmit(myForm);
just modify on
只需修改
function ajaxSuccess (){/*here*/}
if you console.log() the response on ajaxSuccess you could see the data submitted to server. It is on submittedDataproperty.
如果您在 console.log() 上的响应，ajaxSuccess 您可以看到提交给服务器的数据。它在submittedData财产上。
回答by LeftyX
I've used this jQuery pluginwhich has capabilities to upload files.
HTML:
HTML：
<form action="file-echo2.php" method="post" enctype="multipart/form-data">
<input type="file" name="myfile"><br>
<input type="submit" value="Upload File to Server">
</form>
Javascrtipt:
Java脚本：
$('form').ajaxForm({
beforeSend: function() {
},
uploadProgress: function(event, position, total, percentComplete) {
},
success: function() {
},
complete: function(xhr) {
}
});
