CODEWITHSUNDEEP
javascriptjqueryajaxupload
johnnietheblack
johnnietheblack

Reputation: 13320

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?

Upvotes: 26

Views: 28388

Answers (7)

Riyad Kalla
Riyad Kalla

Reputation: 10702

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.

Upvotes: 31

Ionuț G. Stan
Ionuț G. Stan

Reputation: 179119

Strictly speaking there are possibilities to do real AJAX file uploads, but this is only possible in Firefox 3+, Safari 4 and Chrome 2. In all other browsers you must use a workaround like the iframe technique or a Flash based uploader.

Upvotes: 1

Paolo Bergantino
Paolo Bergantino

Reputation: 488394

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.

Upvotes: 39

Peter
Peter

Reputation: 29837

Assuming you are using Java, DWR version 3.0 (currently in RC1) has support for binary file upload/download, which makes the problem trivially easy. I have not had a chance to try this out yet but we use DWR extensively with total success; it is a great Ajax toolkit.

http://directwebremoting.org/blog/joe/2008/12/16/dwr_version_3_0_release_candidate_1.html

Upvotes: 1

Luis Melgratti
Luis Melgratti

Reputation: 12050

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

Upvotes: 2

Chad Birch
Chad Birch

Reputation: 74528

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

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

Upvotes: 1

Mun
Mun

Reputation: 14308

Haven't used it personally, but Ajax Uploader is a component I recently came across which says it can do file uploads inside an UpdatePanel (assuming you're using ASP.NET).

Upvotes: 0

Related Questions