formData object not working with jquery AJAX post?

15
votes

lets jump right into the code : 

var formData = new FormData();

formData.append('name', dogName);
formData.append('weight', dogWeight);
formData.append('activity', dogActivity);
formData.append('age', dogAge);
formData.append('file', document.getElementById("dogImg").files[0]);
console.log(formData);

Here I am appending some strings and one file object to the formData object in order to send all the information asynchronous to the server.

Right after that I have this jquery ajax request : 

$.ajax({
  type: "POST",
  url: "/foodoo/index.php?method=insertNewDog",
  data: JSON.stringify(formData),
  processData: false,  // tell jQuery not to process the data
  contentType: "multipart/form-data; charset=utf-8",
  success: function(response){
     console.log(response);
  },
  error: function(){
  }
});

So here I am trying to POST the info to the server, on the server php file I have a simple print_r of the POST so I see what gets through and what not.

Unfortunately my response in the console.log(data) is empty.

Also if you check the HEADER in the Network tab you get the following empty output:

enter image description here

Success function gets called (just for clarification)

3
javascriptjqueryajaxform-data
JSON.stringify only works with plain objects/arrays. FormData is not plain object. You have to pass FormData.getAll() instead of FormData – hindmost
data: JSON.stringify(formData.getAll()) ? This results in Uncaught TypeError: formData.getAll is not a function – noa-dev
Then don't use JSON.stringify at all. Pass formData as is. – hindmost
Okay, when I send it as it is - and then print_r the object in the php file and console.log it as a response i get a plain nothing ---- But the request Payload in the Header TAB in Network is now filled out with the send data – noa-dev

3 Answers

20
votes

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 to false (Lets you prevent jQuery from automatically transforming the data into a query string).
  • Set the contentType to false (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);
    }
});
6
votes

if you did exactly as pervious anwswer and still not working dont worry its working

maybe intelligence and quick wath are telling you its not working

enter image description here

but dont worry, look at network tap enter image description here

its working

hope this saves your time

1
votes
//For those who use plain javascript

var form = document.getElementById('registration-form'); //id of form
var 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);