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

I am using jQuery and Ajax for submitting data and files, but I'm not sure How is that both data sent and file is in one form?

I am currently equally agreeing with both methods, but the way the data is gathered in an array is different, the data usage is . Serialize (); but use the file = new form data ($ (this) [0]);

Is it possible to add both methods to be able to upload the same file and data?

Format data through jQuery, Ajax and html

  $ ("form # data"). Submit (function () {var FormData = $ (this) .serialize (); $ .ajax ({url: window.location.pathname, type: 'post', data: formdata, async: wrong, success: work (data ) {Warning (data)}, cache: incorrect, content type: wrong, process data: wrong}); return back;}); & Lt; Form id = "data" method = "post" & gt; & Lt; Input type = "text" name = "first" value = "bob" /> & Lt; Input type = "text" name = "medium" value = "james" /> & Lt; Input type = "text" name = "last" value = "smith" /> & Lt; Button & gt; Submit & lt; / Button & gt; & Lt; / Form & gt;  

Files jquery, ajax and html

  $ ("form # files"). Submit (function () {var FormData = new form data ($ (this) [0]); $ .ajax ({url: window.location.pathname, type: 'post', data: formadata, async: fraud, success : Function (data) {warning (data)}, cache: wrong, content type: incorrect, process data: wrong}); return returned;}); & Lt; Form id = "files" method = "post" enctype = "multipart / form-data" & gt; & Lt; Input name = "image" type = "file" /> & Lt; Button & gt; Submit & lt; / Button & gt; & Lt; / Form & gt;  

How can I combine the above so that I send data and files in a form through AJAX?

My goal is to be able to send this form in a post with Ajax, is it possible?

  & lt; Form id = "datafiles" method = "post" enctype = "multipart / form-data" & gt; & Lt; Input type = "text" name = "first" value = "bob" /> & Lt; Input type = "text" name = "medium" value = "james" /> & Lt; Input type = "text" name = "last" value = "smith" /> & Lt; Input name = "image" type = "file" /> & Lt; Button & gt; Submit & lt; / Button & gt; & Lt; / Form & gt;  

The problem was that I was using the wrong jQuery identifier

PHP + HTML

Together upload data and files > & lt;? Print_r ($ _post); Print_r ($ _ files); ? & Gt; & Lt; Form id = "data" method = "post" enctype = "multipart / form-data" & gt; & Lt; Input type = "text" name = "first" value = "bob" /> & Lt; Input type = "text" name = "medium" value = "james" /> & Lt; Input type = "text" name = "last" value = "smith" /> & Lt; Input name = "image" type = "file" /> & Lt; Button & gt; Submit & lt; / Button & gt; & Lt; / Form & gt;

jQuery + Ajax

  $ ("Form # Data"). Submit (function () {var formData = new formata (this); $ .ajax ({url: window.location.pathname, type: 'post', data: formdata, async: incorrect, success: function (data) { Alert (data)}, cache: incorrect, content type: wrong, process data: wrong}); return;});  

Short Version

  $ ("Form # Data"). Submit (function () {var formadata = new form data (this); $ .post ($ (this) .attr ("verb"), formadata, function (data) {warning (data);}); return; });