Uploading both data and files in one form using Ajax?

Question

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?

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 .serialize(); but the files use = new FormData($(this)[0]);

Is it possible to combine both methods to be able to upload files and data in one form through Ajax?

Data jQuery, Ajax and html

$("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; });  <form id="data" method="post">     <input type="text" name="first" value="Bob" />     <input type="text" name="middle" value="James" />     <input type="text" name="last" value="Smith" />     <button>Submit</button> </form> 

Files jQuery, Ajax and html

$("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; });  <form id="files" method="post" enctype="multipart/form-data">     <input name="image" type="file" />     <button>Submit</button> </form> 

How can I combine the above so that I can send data and files in one form via Ajax?

My aim is to be able to send all of this form in one post with Ajax, is it possible?

<form id="datafiles" method="post" enctype="multipart/form-data">     <input type="text" name="first" value="Bob" />     <input type="text" name="middle" value="James" />     <input type="text" name="last" value="Smith" />     <input name="image" type="file" />     <button>Submit</button> </form> 

Answer 1

The problem I had was using the wrong jQuery identifier.

You can upload data and files with one form using ajax.

PHP + HTML

<?php  print_r($_POST); print_r($_FILES); ?>  <form id="data" method="post" enctype="multipart/form-data">     <input type="text" name="first" value="Bob" />     <input type="text" name="middle" value="James" />     <input type="text" name="last" value="Smith" />     <input name="image" type="file" />     <button>Submit</button> </form> 

jQuery + Ajax

$("form#data").submit(function(e) {     e.preventDefault();         var formData = new FormData(this);      $.ajax({         url: window.location.pathname,         type: 'POST',         data: formData,         success: function (data) {             alert(data)         },         cache: false,         contentType: false,         processData: false     }); }); 

Short Version

$("form#data").submit(function(e) {     e.preventDefault();     var formData = new FormData(this);          $.post($(this).attr("action"), formData, function(data) {         alert(data);     }); });