Edit Question - KnowledgeHub

Title Body

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> <

Tags (comma-separated) Cancel