title: Uploading both data and files in one form using Ajax?
body: <p>I'm using jQuery and Ajax for my forms to submit data and files but I'm not sure how to send both data and files in one form?</p>
  
  <p>I currently do almost the same with both methods but the way in which the data is gathered into an array is different, the data uses <code>.serialize();</code> but the files use <code>= new FormData($(this)[0]);</code></p>
  
  <p>Is it possible to combine both methods to be able to upload files and data in one form through Ajax?</p>
  
  <p><strong>Data jQuery, Ajax and html</strong></p>
  
  <pre><code>$("form#data").submit(function(){
  
      var formData = $(this).serialize();
  
      $.ajax({
          url: window.location.pathname,
          type: 'POST',
          data: formData,
          async: false,
          success: function (data) {
              alert(data)
          },
          cache: false,
          contentType: false,
          processData: false
      });
  
      return false;
  });
  
  &lt;form id="data" method="post"&gt;
      &lt;input type="text" name="first" value="Bob" /&gt;
      &lt;input type="text" name="middle" value="James" /&gt;
      &lt;input type="text" name="last" value="Smith" /&gt;
      &lt;button&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>Files jQuery, Ajax and html</strong></p>
  
  <pre><code>$("form#files").submit(function(){
  
      var formData = new FormData($(this)[0]);
  
      $.ajax({
          url: window.location.pathname,
          type: 'POST',
          data: formData,
          async: false,
          success: function (data) {
              alert(data)
          },
          cache: false,
          contentType: false,
          processData: false
      });
  
      return false;
  });
  
  &lt;form id="files" method="post" enctype="multipart/form-data"&gt;
      &lt;input name="image" type="file" /&gt;
      &lt;button&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>How can I combine the above so that I can send data and files in one form via Ajax?</p>
  
  <p>My aim is to be able to send all of this form in one post with Ajax, is it possible?</p>
  
  <pre><code>&lt;form id="datafiles" method="post" enctype="multipart/form-data"&gt;
      &lt;input type="text" name="first" value="Bob" /&gt;
      &lt;input type="text" name="middle" value="James" /&gt;
      &lt;input type="text" name="last" value="Smith" /&gt;
      &lt;input name="image" type="file" /&gt;
      &lt;button&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>