Is it possible to use Ajax to do file upload?

Question

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?

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

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

Answer 3

我使用swfupload进行多个类似ajax的上传（基于javascript / flash）

Answer 4

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

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

Answer 5

严格来说，有可能进行真正的AJAX文件上传 ，但这仅适用于Firefox 3 +，Safari 4和Chrome 2.在所有其他浏览器中，您必须使用iframe技术或基于Flash的上传器等变通方法。

Answer 6

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

Answer 7

没有亲自使用它，但Ajax Uploader是我最近遇到的一个组件，它说它可以在UpdatePanel内部进行文件上传（假设你使用的是ASP.NET）。