How to send FormData objects with Ajax-requests in jQuery?

Question

The XMLHttpRequest Level 2 standard (still a working draft) defines the `FormData` interface. This interface enables appending `File` objects to XHR-requests (Ajax-requests). Btw, this is a new feature - in the past, the "hidden-iframe-trick" was used (read about that in my other question). This is how it works (example): ``` var xhr = new XMLHttpRequest(), fd = new FormData(); fd.append( 'file', input.files[0] ); xhr.open( 'POST', 'http://example.com/script.php', true ); xhr.onreadystatechange = handler; xhr.send( fd ); ``` where `input` is a `<input type="file">` field, and `handler` is the success-handler for the Ajax-request. This works beautifully in all browsers (again, except IE). Now, I would like to make this functionality work with jQuery. I tried this: ``` var fd = new FormData(); fd.append( 'file', input.files[0] ); $.post( 'http://example.com/script.php', fd, handler ); ``` Unfortunately, that won't work (an "Illegal invocation" error is thrown - screenshot is here). I as…

Accepted Answer

I believe you could do it like this :

```
var fd = new FormData();    
fd.append( 'file', input.files[0] );

$.ajax({
  url: 'http://example.com/script.php',
  data: fd,
  processData: false,
  contentType: false,
  type: 'POST',
  success: function(data){
    alert(data);
  }
});
```

Notes:

Setting `processData` to `false` lets you prevent jQuery from automatically transforming the data into a query string. See the docs for more info.

Setting the `contentType` to `false` is imperative, since otherwise jQuery will set it incorrectly.

How to send FormData objects with Ajax-requests in jQuery?

Solution

Problem

Related problems