title: How to append multiple file inputs to a FormData object using $.each?
body: <p>I have a multiple (and dynamic) number of inputs of <code>type=file</code>.  </p>
  
  <p>I want to create a FormData object out of them.</p>
  
  <p>I need to manually append them to the object as I need access to their filenames for inserting into a database and therefore need to specify a filename is this format:</p>
  
  <pre><code>myFormData.append(name,file,filename);
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;form id="my_form" enctype="multipart/form-data"&gt;
      &lt;input type="file" name="undefined" id="file_1" data-filename="image.jpg"&gt;
      &lt;input type="file" name="undefined" id="file_2" data-filename="image2.jpg"&gt;
      &lt;button&gt;click&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>var myFormData = new FormData();
  
  $(document).on("click", "button", function(e) {
      e.preventDefault();
      var inputs = $("#my_form input");
      $.each(inputs,function(obj,v) {
          var file = v.files[0];
          var filename = $(v).attr("data-filename");
          var name = $(v).attr("id");
          myFormData.append(name, file, filename);
      });
  
      //alert(JSON.stringify(myFormData));
      console.log(myFormData);
  });  
  </code></pre>
  
  <p>I don't think the object is being constructed properly and I haven't been able to correctly view the contents of the object to confirm this.  </p>
  
  <p>This is what I get in the console:</p>
  
  <p><img src="https://i.stack.imgur.com/cxmym.png" alt="enter image description here"></p>
  
  <p><strong>jsFiddle</strong></p>
  
  <p><a href="http://jsfiddle.net/rwone/K7aMw/" rel="noreferrer">http://jsfiddle.net/rwone/K7aMw/</a></p>