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

Question

问题陈述：我有一个名为“editform”的表单，其中包含 2 个文件输入和多个文本输入。 表单提交是使用 AJAX 完成的。 但是 POST 只发送一个文件值。 我想将两个文件一起发布到一个 go 从一个表单中。

当前 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);

当前 Output：

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]);
    }
});

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