javascript - Uploading both data and files in one form using Ajax? -

i'm using jquery , ajax forms submit data , files i'm not sure how send both data , files in 1 form?

i same both methods way in data gathered array different, data uses .serialize(); files use = new formdata($(this)[0]);

is possible combine both methods able upload files , data in 1 form through ajax?

data jquery, ajax , 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 , 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 combine above can send data , files in 1 form via ajax?

my aim able send of form in 1 post ajax, 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> 

the problem had using wrong jquery identifier.

you can upload data , files 1 form using ajax.

php + html

<?     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(){      var formdata = new formdata(this);      $.ajax({         url: window.location.pathname,         type: 'post',         data: formdata,         async: false,         success: function (data) {             alert(data)         },         cache: false,         contenttype: false,         processdata: false     });      return false; }); 

short version

$("form#data").submit(function() {      var formdata = new formdata(this);      $.post($(this).attr("action"), formdata, function(data) {         alert(data);     });      return false; });