如何使用 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]);
    }
});

上面的代碼將遍歷每個輸入並獲取選定的文件。 您的代碼僅選擇第一個文件輸入。