formData.附加来自不同输入文件的两个文件

Question

我试图从不同的输入文件框上传两个文件，而不使用JQuery, AJAX和PHP刷新页面。问题是文件没有上传，可能是因为我的形式。附加这两个文件或者我定义"data"在AJAX .

这是我的HTML表单

<form>
<div class="col col-sm-12 mb-2">
<label class="form-label">Cover Image</label>
<input type="file" class="form-control" name="coverImage" id="coverImage">
</div>

<div class="col col-sm-12">
<label class="form-label">File to Embed</label>
<input type="file" class="form-control" name="fileToEmbed" id="fileToEmbed">
</div>
<button type="button" class="btn btn-primary" name="steganize" id="steganize">STEGANIZE</button>
</form>

这是我尝试做的代码。

$('#steganize').click(function(){
var file = $('#coverImage').prop("files")[0];
var form = new FormData();
form.append("coverImage", file);
var file2 = $('#fileToEmbed').prop("files")[0];
var form2 = new FormData();
form2.append("fileToEmbed", file2);
$.ajax({
url: "steganize.php",
type: "POST",
data:  {form, form2},
contentType: false,
processData:false,
success: function(result){
console.log(result);
}
});
});

Also tried this

$('#steganize').click(function(){
var file = $('#coverImage').prop("files")[0];
var file = $('#fileToEmbed').prop("files")[1];
var form = new FormData();
form.append("coverImage", file);
$.ajax({
url: "steganize.php",
type: "POST",
data:  form,
contentType: false,
processData:false,
success: function(result){
console.log(result);
}
});
});

不幸的是，这两个都不能工作。你知道正确的写法吗?我为此困了好几个小时。如果你能帮助我，我先谢谢你。

Answer 1

您只能在AJAX请求中发送单个FormData对象，因此第二个示例接近正确。这里的问题是，您重新定义了file变量，并且只附加了其中一个值。

另外，由于使用[1]，您抓取fileToEmbed输入中选择的第二个文件-我假设您的意思是抓取第一个

。正确的代码应该是这样的:

$('#steganize').click(function() {
var coverImage = $('#coverImage').prop("files")[0];
var fileToEmbed = $('#fileToEmbed').prop("files")[0];

var form = new FormData();
form.append("coverImage", coverImage);
form.append("fileToEmbed", fileToEmbed);
$.ajax({
url: "steganize.php",
type: "POST",
data: form,
contentType: false,
processData: false,
success: function(result) {
console.log(result);
}
});
});