Collect Multiple Inputs File To Append To Formdata

Suppose I have the following form.

<

Solution 1:

You don't have to collect fields since you can put the form itself into FormData object:

var form = document.getElementById('testForm');

form.addEventListener('submit', function(e) {

  e.preventDefault();

  var request = newXMLHttpRequest();
  request.open('POST', '/upload');

  request.onload = function(e) {
    console.log('Request Status', request.status);
  };

  var formData = newFormData(form);
  request.send(formData);
});

UPDATE

If you need to upload several files, you might use multiple attribute on the input instead of several inputs:

<form id="testForm">
  <input type="file" name="upload" multiple>
  <input type="submit">
</form>