title: Data not appending to FormData Object
body: <p>I'm trying to upload multiple images for an image upload system using AJAX on Jquery. </p>
  
  <p>However, I'm having trouble getting the FormData object to take in the data from the file input. Here is my code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;form id="multiform" role="form" action="process.php" method="post" enctype="multipart/form-data"&gt;
      &lt;div class="form-group"&gt;
          &lt;div class=""&gt;
              &lt;label for="picture"&gt;Upload Pictures&lt;/label&gt;
              &lt;input type="file" id="pic_upload_file" name="pics[]" multiple&gt;
              &lt;input type="button" id="pic_upload" name="pic_upload" value="Upload"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>JQuery</p>
  
  <pre><code>$('#pic_upload').click(function(e) {
      var formData = new FormData();
      formData.append("pics", file);
  }); 
  </code></pre>
  
  <p>This object is created and I can see it in the console, but I dont know how to get the user file input data into it to send to a php script. </p>
  
  <p>Can anyone help?</p>