jQuery AJAX multiple files upload but send one file at a time to server using ajax

Question

I have following html

<form id="submit-form">
  <input type="file" id="resume" name="resume[]" class="inputFileHidden" multiple>
  <input type="submit">
</form>

I am uploading files using ajax using formdata. The thing is that I don't want to send all files in one go using ajax. Instead I want to send single file per ajax request.

To upload files I am using following jQuery code

$('#submit-form').submit(function(e) {
  e.preventDefault();
  var formData = new FormData(this);
  var url = "upload-files.php";
  $.ajax({
    url: url,
    type: 'post',
    data: formData,
    success: function(response) {
      alert(response);
    },
    cache: false,
    contentType: false,
    processData: false
  })
})

Check this [SO answer](https://stackoverflow.com/a/19296001/1151408), relatively to the for loop. (put the ajax inside it) — Yuri, Mar 30 '18 at 08:29

score 3 · Accepted Answer · answered Mar 30 '18 at 08:37

You can just use forEach method of FormData:

$('#submit-form').submit(function(e) {
  e.preventDefault();
  var formData = new FormData(this);
  var url = "upload-files.php";

  formData.forEach(function(entry) {
    if (entry instanceof File) {
      var fileForm = new FormData()
      fileForm.append('resume', entry)

      $.ajax({
        url: url,
        type: 'post',
        data: fileForm,
        success: function(response) {
          alert(response);
        },
        cache: false,
        contentType: false,
        processData: false
      })
    }
  })
})

jQuery AJAX multiple files upload but send one file at a time to server using ajax

1 Answers1