FormData.append("key", "value") is not working

New in Chrome 50+ and Firefox 39+ (resp. 44+):

• formdata.entries() (combine with Array.from() for debugability)
• formdata.get(key)
• and more very useful methods

Original answer:

What I usually do to 'debug' a FormData object, is just send it (anywhere!) and check the browser logs (eg. Chrome devtools' Network tab).

You don't need a/the same Ajax framework. You don't need any details. Just send it:

var xhr = new XMLHttpRequest;xhr.open('POST', '/', true);xhr.send(data);

Easy.

You say it's not working. What are you expecting to happen?

There's no way of getting the data out of a FormData object; it's just intended for you to use to send data along with an XMLHttpRequest object (for the send method).

Update almost five years later: In some newer browsers, this is no longer true and you can now see the data provided to FormData in addition to just stuffing data into it. See the accepted answer for more info.

You might have been having the same problem I was initially having. I was trying to use FormData to grab all my input files to upload an image, but at the same time I wanted to append a session ID to the information passed along to the server. All this time, I thought by appending the information, you would be able to see it in the server by accessing the object. I was wrong. When you append to FormData, the way to check the appended information on the server is by a simple $_POST['*your appended data*'] query. like so:

js:

$('form').submit(function(){    var sessionID = 8;    var formData = new FormData(this);    formData.append('id', sessionID);    $.ajax({        url: "yoururl.php",        data: formData,        processData: false,        contentType: false,        type: 'POST',        success: function(data){            alert(data);        }    });});

then on php:

$sessionID = $_POST['id'];$files = $_FILES['image'];$foreach ($files as $key=>val){    //...}