Is it possible to use Ajax to do file upload?

I don't want to use jQuery, but I'd like to use Ajax to do file uploading. Is that possible?

If so, where can I find information/tutorial on it?

Solution 1:

No, it isn't possible to do this with javascript.

In order to give the 'AJAX' feel, however, you can submit a form to a hidden iframe and output the script results to it, then process from there. Google ajax iframe upload and get started from there.

If you are using jQuery, there is also the Form plugin which will automatically create this iframe for you if your form has any file fields in it. I haven't used it to do this, but I've heard good things.

As pointed out in the comments, you can also use something like the very popular SWFUpload to accomplish the desired effect with Flash.

Solution 2:

Incase anyone is finding this question much later: yes this is possible with JavaScript now.

HTML5 defined 2 new APIs that you use together to accomplish this: Drag and Drop API and the File API. You can use jQuery to interact with the APIs effectively letting people drag and drop files for upload.

Here is a tutorial on how to do it.

The code currently works in Chrome 6+ and Firefox 3.6+, Safari 6 and IE 10. If you need Safari 5 support, the code stays almost exactly the same but you use the FormData object instead for the uploaded file list (more information in the post).

Opera supports the File API as of 11, but not the DnD API, the drop operation does not initiate the upload, but they support you getting access to the file with the API. I imagine in 12 they will finish off support for DnD API.

01-20-14 Update: All the major browsers implement all the standard APIs now so this tutorial works in all browsers.

Solution 3:

i use swfupload for multiple ajax-like uploads (its javascript/flash based)

Solution 4:

Here's a bit of detail about how gmail does it, using an iframe:

http://www.sajithmr.com/upload-files-like-gmail/