提问人：kamikaze_pilot 提问时间：12/28/2010 最后编辑：Aryaveerkamikaze_pilot 更新时间：7/9/2020 访问量：267914
如何使用 jQuery 序列化进行文件上传
how to do file upload using jquery serialization
问：
所以我有一个表单，我使用 jquery 序列化函数通过 ajax 提交表单
serialized = $(Forms).serialize();
$.ajax({
type : "POST",
cache : false,
url : "blah",
data : serialized,
success: function(data) {
}
但是，如果表单有一个字段怎么办？如何使用此ajax序列化方法将文件传递到表单中...打印 $_FILES 不会输出任何内容<input type="file">
答：
52赞
Darin Dimitrov
12/28/2010
#1
无法使用 AJAX 上载文件，因为无法访问存储在客户端计算机上的文件的内容并使用 javascript 在请求中发送该文件。实现此目的的技术之一是使用隐藏的 iframe。有一个不错的jquery表单插件，它允许您对表单进行AJAX化，并且它还支持文件上传。因此，使用此插件，您的代码将如下所示：
$(function() {
$('#ifoftheform').ajaxForm(function(result) {
alert('the form was successfully processed');
});
});
该插件会自动负责订阅表单的事件、取消默认提交、序列化值、使用正确的方法并处理文件上传字段......submit
评论
51赞
Rook777
4/5/2013
这不再是真的。使用 <input type='file' name='myfile'/> 和 FormData（） 对象，可以非常简单地使用 AJAX 保存文件。请参阅下面的 Silver89 的答案。
1赞
Darin Dimitrov
4/5/2013
@Rook777，如果您使用的浏览器支持 HTML5 文件 API，那当然是正确的。你有没有在IE中尝试过这个，它有多简单？在 HTML5 成为标准并被所有浏览器支持之前，都会有插件，因为您不能使用 AJAX 上传文件。
3赞
Rook777
4/8/2013
你是对的。我很幸运地处于不支持 IE 的开发环境中，所以我忘了考虑它。是的，如果没有 HTML5 兼容性，此功能将不起作用。根据 caniuse.com/xhr2 的说法，到目前为止只有 IE 10+ 支持此功能。
0赞
user1570144
10/21/2014
jQuery表单插件很棒！
14赞
Rossco
1/30/2015
#2
可以使用 FormData 方法通过 AJAX 上载文件。尽管 IE7、8 和 9 不支持 FormData 功能。
$.ajax({
url: "ajax.php",
type: "POST",
data: new FormData('form'),
contentType: false,
cache: false,
processData:false,
success: function(data) {
$("#response").html(data);
}
});
评论
1赞
Mohamed Ali
11/29/2015
new FormData（'form'） 中的“form”是什么，是id吗，它对我不起作用
0赞
Rossco
11/30/2015
是的，这通常是表单 ID
0赞
Mohamed Ali
11/30/2015
对我来说，它仅适用于document.forms.form，而不是传递给FormData构造函数的“form”字符串
89赞
Shaiful Islam
2/4/2015
#3
使用对象。它适用于任何类型的形式FormData
$(document).on("submit", "form", function(event)
{
event.preventDefault();
$.ajax({
url: $(this).attr("action"),
type: $(this).attr("method"),
dataType: "JSON",
data: new FormData(this),
processData: false,
contentType: false,
success: function (data, status)
{
},
error: function (xhr, desc, err)
{
}
});
});
评论
11赞
Jeppe Mariager-Lam
12/16/2020
关于这一点的重要说明：需要避免错误，因为如果没有这些，jQuery将在发送时尝试将formdata转换为字符串，在这种情况下是不需要的。processData: false, contentType: false,Illegal invocation
0赞
Eatsam ul haq
6/24/2022
但这是当您只想上传文件时。如果我们的表单也有输入字段怎么办。当我们的表单中有文件和输入字段时，有没有办法使用 FormData（）？doing 不会将输入字段数据转换为 String。processData: false, contentType: false
0赞
Rahul Patel
10/12/2016
#4
HTML5 引入了可用于使用 ajax 上传文件的类。FormData
FormData 支持从以下桌面浏览器版本开始。IE 10+、Firefox 4.0+、Chrome 7+、Safari 5+、Opera 12+
34赞
Maryam Zakani
1/20/2018
#5
var form = $('#job-request-form')[0];
var formData = new FormData(form);
event.preventDefault();
$.ajax({
url: "/send_resume/", // the endpoint
type: "POST", // http method
processData: false,
contentType: false,
data: formData,
它对我有用！只需将 processData 和 contentType 设置为 False。
25赞
Renish Patel
1/22/2018
#6
[HTML全文]
<form name="my_form" id="my_form" accept-charset="multipart/form-data" onsubmit="return false">
<input id="name" name="name" placeholder="Enter Name" type="text" value="">
<textarea id="detail" name="detail" placeholder="Enter Detail"></textarea>
<select name="gender" id="gender">
<option value="male" selected="selected">Male</option>
<option value="female">Female</option>
</select>
<input type="file" id="my_images" name="my_images" multiple="" accept="image/x-png,image/gif,image/jpeg"/>
</form>
JavaScript的
var data = new FormData();
//Form data
var form_data = $('#my_form').serializeArray();
$.each(form_data, function (key, input) {
data.append(input.name, input.value);
});
//File data
var file_data = $('input[name="my_images"]')[0].files;
for (var i = 0; i < file_data.length; i++) {
data.append("my_images[]", file_data[i]);
}
//Custom data
data.append('key', 'value');
$.ajax({
url: "URL",
method: "post",
processData: false,
contentType: false,
data: data,
success: function (data) {
//success
},
error: function (e) {
//error
}
});
PHP的
<?php
echo '<pre>';
print_r($_POST);
print_r($_FILES);
echo '</pre>';
die();
?>
评论
0赞
Muhammad Tarique
11/15/2019
如何发送提交按钮名称？
0赞
Renish Patel
11/15/2019
@MuhammadTarique 您只需添加按钮 like，即可在 php 端获得响应 button_name = “Contact Button”<button type="button" name="button_name" value="Contact Button">Submit</button>
0赞
Muhammad Tarique
11/15/2019
感谢您的回复，但我认为它不会以这种方式工作。但是，我已经通过使用formData.append("btnName", "true");
0赞
Renish Patel
11/15/2019
@MuhammadTarique 这个例子已经添加到这篇文章中，比如data.append('key', 'value');
14赞
RameshN
10/18/2018
#7
$(document).on('click', '#submitBtn', function(e){
e.preventDefault();
e.stopImmediatePropagation();
var form = $("#myForm").closest("form");
var formData = new FormData(form[0]);
$.ajax({
type: "POST",
data: formData,
dataType: "json",
url: form.attr('action'),
processData: false,
contentType: false,
success: function(data) {
alert('Sucess! Form data posted with file type of input also!');
}
)};});
通过在ajax调用中使用和设置提交带有文件输入的表单为我工作new FormData()processData: false, contentType:false
使用上面的代码，我也可以通过Ajax提交带有文件字段的表单数据
评论