26

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?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
johnnietheblack
  • 13,050
  • 28
  • 95
  • 133

7 Answers7

39

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.

Paolo Bergantino
  • 480,997
  • 81
  • 517
  • 436
  • You can also use silverlight. – bendewey Feb 13 '09 at 14:23
  • very nicely put, I'll be quoting that in a report :) – Peter Perháč Apr 18 '09 at 15:31
  • While I also think that the iframe approach is the best one I wanted to point out that for browsers that support the FileReader API there is another possibility. I wrote some code here: http://stackoverflow.com/questions/2338711/how-do-i-enable-universalxpconnect-for-a-particular-web-page/4220885#4220885 Using XMLHttpRequest at least on mozilla you can even get upload progress! – panzi Nov 18 '10 at 23:52
  • i have just 1 question if jquery do form submit in iframe i wonder how he did it with out the progress bar appears in time any iframe submit shows a progress bar in the parent page ???? i need to know how to submit a form in iframe with out show a progress bar – Marwan Oct 21 '12 at 08:48
31

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.

Riyad Kalla
  • 10,604
  • 7
  • 53
  • 56
2

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

Luis Melgratti
  • 11,881
  • 3
  • 30
  • 32
  • im down, im just kinda a stickler on re-inventing the wheel and doing it myself, at least the first time. i know its dumb, but im just the type of person that needs to do that;) – johnnietheblack Feb 12 '09 at 23:19
  • It's not dumb! actually it's great. The only way to learn. And the funny part its to learn. ;) – Luis Melgratti Feb 12 '09 at 23:52
1

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

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

Chad Birch
  • 73,098
  • 23
  • 151
  • 149
1

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.

Ionuț G. Stan
  • 176,118
  • 18
  • 189
  • 202
1

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

Peter
  • 29,498
  • 21
  • 89
  • 122
0

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).

Mun
  • 14,098
  • 11
  • 59
  • 83