我正在使用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>
一个简单但更有效的方法:
new FormData()本身就像一个容器(或袋子)。你可以把所有attr或文件本身。
你唯一需要附加属性file fileName eg:
let formData = new FormData()
formData.append('input', input.files[0], input.files[0].name)
然后传入AJAX request。例如:
let formData = new FormData()
var d = $('#fileid')[0].files[0]
formData.append('fileid', d);
formData.append('inputname', value);
$.ajax({
url: '/yourroute',
method: 'POST',
contentType: false,
processData: false,
data: formData,
success: function(res){
console.log('successfully')
},
error: function(){
console.log('error')
}
})
你可以用FormData附加n个文件或数据。
如果你在Node.js中使用AJAX请求从Script.js文件到Route文件，请注意使用
要求的事情。主体用于访问数据(即文本)
要求的事情。访问文件的文件(如图像、视频等)
一个简单但更有效的方法:
new FormData()本身就像一个容器(或袋子)。你可以把所有attr或文件本身。
你唯一需要附加属性file fileName eg:
let formData = new FormData()
formData.append('input', input.files[0], input.files[0].name)
然后传入AJAX request。例如:
let formData = new FormData()
var d = $('#fileid')[0].files[0]
formData.append('fileid', d);
formData.append('inputname', value);
$.ajax({
url: '/yourroute',
method: 'POST',
contentType: false,
processData: false,
data: formData,
success: function(res){
console.log('successfully')
},
error: function(){
console.log('error')
}
})
你可以用FormData附加n个文件或数据。
如果你在Node.js中使用AJAX请求从Script.js文件到Route文件，请注意使用
要求的事情。主体用于访问数据(即文本)
要求的事情。访问文件的文件(如图像、视频等)
编辑:在新版本的JQuery(3.6)中，你也可以尝试使用contentType函数参数来代替enctype。试试contentType: multipart/form-data。
对我来说，如果Ajax请求中没有enctype: 'multipart/form-data'字段，它就无法工作。我希望它能帮助那些陷入类似问题的人。
尽管在表单属性中已经设置了enctype，但由于某些原因，Ajax请求在没有显式声明的情况下无法自动识别enctype (jQuery 3.3.1)。
// Tested, this works for me (jQuery 3.3.1)
fileUploadForm.submit(function (e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: $(this).attr('action'),
enctype: 'multipart/form-data',
data: new FormData(this),
processData: false,
contentType: false,
success: function (data) {
console.log('Thank God it worked!');
}
}
);
});
// enctype field was set in the form but Ajax request didn't set it by default.
<form action="process/file-upload" enctype="multipart/form-data" method="post" >
<input type="file" name="input-file" accept="text/plain" required>
...
</form>
正如上面提到的，请特别注意contentType和processData字段。
