如何使用AJAX从同一表单一起发布图像和文件？

Question

问题声明：我有一个名为"editform"的表单，有两个FILE输入&多个TEXT输入。表单提交是使用AJAX完成的。但是POST只发送一个文件值。我想从一个表单一次性将两个文件发布在一起。

当前AJAX代码：

function thor2(tag){
$("#preloader").show();
var a2 = String(tag);
var fd = new FormData($('#editform')[0]);
var file_data = $("input[type='file']")[0].files; // for multiple files
for(var i = 0;i<file_data.length;i++){
fd.append("file_"+i, file_data[i]);
}
var other_data = $("#"+a2).serializeArray();
$.each(other_data,function(key,input){
fd.append(input.name,input.value);
});
$.ajax({
url: 'processor.php',
data: fd,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
$("#response_block").html(data);
$("#preloader").hide();
}
});     
}

当前HTML代码：

<form role="form" id="tickerform" name="tickerform" method="post"  enctype="multipart/form-data" >
<div class="form-group"><br>
<label for="exampleInputEmail1">News Title</label>
<input type="text" class="form-control" id="news_title" name="news_title"  value="" placeholder="Enter News Title">
</div>
<div class="form-group"><br>
<label for="exampleInputEmail1">News Sub-Text</label>
<input type="text" class="form-control"  id="news_subtext" name="news_subtext"  value="" placeholder="Enter News Subtext">
</div>
<div class="form-group"><br>
<label for="exampleInputEmail1">News Details</label>
<input type="text" class="form-control"  id="news_detail" name="news_detail"  value="" placeholder="Enter News Details">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Show in homepage</label>
<select class="form-control c-select" id="news_home" name="news_home" >
<option value='active'>Active</option>
<option value='inactive'>Inactive</option>
</select>
</div>

<div class="form-group">
<label for="exampleInputPassword1">Publish Status</label>
<select class="form-control c-select" id="news_status" name="news_status" >
<option value='active'>Active</option>
<option value='inactive'>Inactive</option>
</select>
</div>


<div class="form-group">
<label for="exampleInputPassword1">Choose Banner (Resolutions yet to be mentioned.)</label>
<input type="file" class="form-control"  id="news_banner" name="news_banner"    value="">
</div>

<div class="form-group">
<label for="exampleInputPassword1">Choose File (Optional)</label>
<input type="file" class="form-control"  id="news_file" name="news_file"  value="">
</div>


<button type="button" onClick="thor2('tickerform');" id='confirm' hidden style="display: none;" ></button>
</form>

当前PHP代码：

var_dump($_FILES);

当前输出：

array(1) {
["file_0"]=>
array(5) {
["name"]=>
string(9) "logoh.png"
["type"]=>
string(9) "image/png"
["tmp_name"]=>
string(14) "/tmp/phpQeMRof"
["error"]=>
int(0)
["size"]=>
int(11754)
}
}

Answer 1

更改：

var file_data = $("input[type='file']")[0].files; // for multiple files
for(var i = 0;i<file_data.length;i++){
fd.append("file_"+i, file_data[i]);
}

对此：

$("input[type='file']").each(function(x) {
for(var i = 0; i < this.files.length; i++){
fd.append("file_" + x + '_' + i, this.files[i]);
}
});

上面的代码将遍历每个输入并获取选定的文件。您的代码只选择第一个文件输入。