XMLHttpRequest POST multipart/form-data

Question

I want to use XMLHttpRequest in JavaScript to POST a form that includes a file type input element so that I can avoid page refresh and get useful XML back.

I can sub

Answer 1

There isn't any way to access a file input field inside javascript so there isn't a javascript only solution for ajax file uploads.

There are workaround like using an iframe.

The other option would be to use something like SWFUpload or Google Gears

Answer 2

You will need to POST to an IFrame to get this to work, simply add a target attribute to your form, where you specify the IFrame ID. Something like this:

<form method="post" target="myiframe" action="handler.php">
...
</form>
<iframe id="myiframe" style="display:none" />

Answer 3

Content-Disposition: form-data, name

You should use semicolon, like this: Content-Disposition: form-data; name

Answer 4

i am confuse about the onload event that you specified, it is on the page or on iframe?, the first answer is correct theres no way to do this using purely xmlhttprequest, if what you want to acheive is triggering some method once the response exist on iframe, simply check if it has content already or not using DOM scripting, then fire the method.

to attach onload event to the iframe

if(window.attachEvent){
 document.getElementById(iframe).attachEvent('onload', some_method);
}else{
 document.getElementById(iframe).addEventListener('load', some_method, false);
} 

Answer 5

You can construct the 'multipart/form-data' request yourself (read more about it at http://www.faqs.org/rfcs/rfc2388.html) and then use the send method (ie. xhr.send(your-multipart-form-data)). Similarly, but easier, in Firefox 4+ (also in Chrome 5+ and Safari 5+) you can use the FormData interface that helps to construct such requests. The send method is good for text content but if you want to send binary data such as images, you can do it with the help of the sendAsBinary method that has been around starting with Firefox 3.0. For details on how to send files via XMLHttpRequest, please refer to http://blog.igstan.ro/2009/01/pure-javascript-file-upload.html.

Answer 6

Here is an up to date way using FormData (full doc @MDN)

Script:

var form = document.querySelector('#myForm');
form.addEventListener("submit", function(e) {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", this.action);
    xhr.addEventListener("load", function(e) {
        // Your callback
    });

    xhr.send(new FormData(this));

    e.preventDefault();
});

(from this basic form)

<form id="myForm" action="..." method="POST" enctype="multipart/form-data">
    <input type="file" name="file0">
    <input type="text" name="some-text">
    ...
</form>

Thanks again to Alex Polo for his answer