使用 AJAX 在序列/隊列中上傳多個文件

Question

我是 Javascript 和 jQuery 的新手。 在表單中上傳N個文件時，只上傳最后一個文件N次，

我想通過 AJAX 請求一次（異步）上傳每個文件。

下面是我的實現：

 $("#file-input").on("input", function() { var formdata = new FormData(document.getElementById("file-catcher")); $.each($("#file-input")[0].files, function (key, file){ formdata.append(key, file); // This is to Inspecting each file for(var pair of formdata.entries()) { console.log(pair[0]+ ': '+ pair[1]); } // Sending AJAX $.ajax({ type: "POST", data: formdata, url: "/url/to/upload", datatype: 'JSON', contentType: false, cache: false, processData: false, success:function(data){ console.log(data); // Inspecting Response }, error: function (error) { console.log(error); // Inspecting Error if occured } }); }); });

 <form method="POST" id="file-catcher" action="/url/to/upload" enctype="multipart/form-data"> <input type="text" name="fileCode" value="10"> <input type="file" id="file-input" name="file-input" multiple> </form>

Answer 1

我要感謝Chris G指導我遍歷每個文件以創建隊列並按順序發送文件。

const inputFile = document.getElementById('file-input');

// Iterating through each file and sending AJAX request
for (const file of inputFile.files){

  var formdata = new FormData(document.getElementById("file-catcher"));

  formdata.append("file-input", file);

  $.ajax({
        type: "POST",
        data: formdata,
        url: "/url/to/upload",
        datatype: 'JSON',
        contentType: false,
        cache: false,
        processData: false,
        success:function(data){
          console.log(data);
        },
        error: function (error) {
          console.log(error);
        }
  });

}