Как отправить изображение и файл вместе из одной формы, используя AJAX?

Question

Постановка задачи: У меня есть форма с именем 'editform' с 2 входами FILE и несколькими входами TEXT. Отправка формы осуществляется с использованием 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);

Токовый выход:

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

Приведенный выше код будет перебирать каждый ввод и извлекать выбранные файлы. Ваш код выбирает только первый файл ввода.