我正在为我的表单使用 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>