Uploading both data and files in one form using Ajax?
ajax, forms, javascript, jquery
Solution
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);
});
});
Problem
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> ```