formData object not working with jquery AJAX post?
When you're sending an ajax request via jQuery and you want to send FormData you don't need to use JSON.stringify
on this FormData. Also when you're sending file the content type must be multipart/form-data
including boundry
- something like this multipart/form-data; boundary=----WebKitFormBoundary0BPm0koKA
So to send FormData including some file via jQuery ajax you need to:
- Set
data
to the FormData without any modifications. - Set
processData
tofalse
(Lets you prevent jQuery from automatically transforming the data into a query string). - Set the
contentType
tofalse
(This is needed because otherwise jQuery will set it incorrectly).
Your request should look like this:
var formData = new FormData();formData.append('name', dogName);// ... formData.append('file', document.getElementById("dogImg").files[0]);$.ajax({ type: "POST", url: "/foodoo/index.php?method=insertNewDog", data: formData, processData: false, contentType: false, success: function(response) { console.log(response); }, error: function(errResponse) { console.log(errResponse); }});
//For those who use plain javascriptvar form = document.getElementById('registration-form'); //id of formvar formdata = new FormData(form);var xhr = new XMLHttpRequest();xhr.open('POST','form.php',true);// xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); //if you have included the setRequestHeader remove that line as you need the // multipart/form-data as content type.xhr.onload = function(){ console.log(xhr.responseText);}xhr.send(formdata);