【发布时间】：2026-02-12 17:30:01
【问题描述】：
我在表单中使用 jQuery 和 Ajax 来提交数据和文件，但我不确定如何在一个表单中同时发送数据和文件？
我目前对这两种方法几乎都做同样的事情，但是将数据收集到数组中的方式不同，数据使用.serialize();，但文件使用= new FormData($(this)[0]);
是否可以结合这两种方法通过 Ajax 以一种形式上传文件和数据？
数据 jQuery、Ajax 和 html
$("form#data").submit(function(){
var formData = $(this).serialize();
$.ajax({
url: window.location.pathname,
type: 'POST',
data: formData,
async: false,
success: function (data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
});
<form id="data" method="post">
<input type="text" name="first" value="Bob" />
<input type="text" name="middle" value="James" />
<input type="text" name="last" value="Smith" />
<button>Submit</button>
</form>
文件 jQuery、Ajax 和 html
$("form#files").submit(function(){
var formData = new FormData($(this)[0]);
$.ajax({
url: window.location.pathname,
type: 'POST',
data: formData,
async: false,
success: function (data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
});
<form id="files" method="post" enctype="multipart/form-data">
<input name="image" type="file" />
<button>Submit</button>
</form>
如何结合以上内容，以便通过 Ajax 以一种形式发送数据和文件？
我的目标是能够使用 Ajax 在一个帖子中发送所有这些表单，这可能吗？
<form id="datafiles" method="post" enctype="multipart/form-data">
<input type="text" name="first" value="Bob" />
<input type="text" name="middle" value="James" />
<input type="text" name="last" value="Smith" />
<input name="image" type="file" />
<button>Submit</button>
</form>
【问题讨论】：
-
FormData方法应该适用于包含您想要的任何内容的表单，而不仅仅是文件上传字段；但它并未得到广泛支持。 -
@lanzz 是哪个？带有序列化的那个似乎只适用于数据，而另一个似乎只适用于文件？
-
根据this MDN page判断，使用
FormData时应提交所有表单数据 -
@lanzz 你是对的，它的工作原理是我认为应该是我使用了错误的表单 ID，你可以通过一个带有 ajax 的表单上传文件和数据。
-
当有多选文件输入时，这似乎不起作用。它只上传第一个文件。
标签： javascript jquery ajax forms