title: HTML5 AJAX Multiple Files Upload
body: <p>I came across this plain js ajax upload code (it seems that jquery <code>$.post</code> does not work with HTML5 for some reason),</p>
  
  <pre><code>    /* If you want to upload only a file along with arbitary data that
         is not in the form, use this */
      var fd = new FormData();
      fd.append("file", document.getElementById('file').files[0]);
  
      /* If you want to simply post the entire form, use this */
      //var fd = document.getElementById('form1').getFormData();
  
      var xhr = new XMLHttpRequest();        
      xhr.upload.addEventListener("progress", uploadProgress, false);
      xhr.addEventListener("load", uploadComplete, false);
      xhr.addEventListener("error", uploadFailed, false);
      xhr.addEventListener("abort", uploadCanceled, false);
      xhr.open("POST", "Upload.php");
      xhr.send(fd);
  </code></pre>
  
  <p>But I have two issues here,</p>
  
  <ol>
  <li>what does this line mean after the object <code>FormData</code>?</li>
  </ol>
  
  <p><code>fd.append("file", document.getElementById('file').files[0]);</code></p>
  
  <p>Why do I need an ID there? Can I do something use jquery <code>append()</code>  with <code>$('input[type=file]')</code>?</p>
  
  <ol>
  <li>This ajax is only for single file upload, how can I change it for multiple files upload?</li>
  </ol>