Queuing asynchronous HTTP file uploads

Question

Is there a way to queue file uploads without resorting to Flash or Silverlight, just with cleverly used forms and JavaScript? Note that the upload should be executed asynchronously.

By "queuing" uploads I mean that if the user tries to upload multiple files, they should not be transferred simultaneously, but rather one at a time, in a single HTTP connection.

Answer 1

http://valums.com/ajax-upload/ - uses jQuery

Answer 2

One option I have seen used before, although I don't have a link or an example, is use an iframe. Basically, the files are submitted to the iframe and JavaScript watches to see when that iframe reloads and then submits the next one. It's not pretty and I think I tried, but couldn't get it to work across browsers (which I needed at the time, including IE6).

Answer 3

How about this.

Answer 4

I have it on good authority that Uploadify is very good. Moreover, it supports queues natively. A simple example, which assumes you've already created a form "file" element with an id of "foo" and an element to use as the queue with an id of "queue". See the docs for more info.

$("foo").uploadify({
  'uploader'  : 'uploadify.swf',
  'script'    : 'uploadify.php',
  'cancelImg' : 'cancel.png',
  'auto'      : true,
  'folder'    : '/uploads',
  'queue'     : "queue"
});

Answer 5

Broadly looking at it, what needs to be done:

• A function to dynamically add forms(to html) with input type as file. One form will have only one file input field. These forms will be our file upload queue.
• A submit function that will submit these forms one after another asynchronously.

That's simple logic I can think for now [have to code when I get home].

Answer 6

I don't believe it's possible to do this on a single HTTP connection, due to limitations of the spec. However, you may get almost the same behaviour by placing the <input> fields in separate forms (be it with HTML or JavaScript) and submitting them in order.

Place their targets on an <iframe> and use the iframe.onload event to trigger the next form in the list.

Additional notes:

• See this for reference targeting iframes. Note that this feature is unsupported in HTML/XHTML Strict.
• The form.target attribute must be equal to the iframe.name attribute. iframe.id will not work; It causes a pop-up window in IE6 and FF3.5.
• A working example of 'all at once' uploading using targeting is available here. I've cleaned up this example a bit and used it. It works in IE6 as well as any first-class browser.

Answer 7

If you're looking for a .Net and more specifically Asp.Net MVC solution, take a look at this post, http://dimebrain.com/2010/01/large-or-asynchronous-file-uploads-in-asp-net-mvc.html. I had it bookmarked for reference.

Answer 8

this jquery plug claims it does without using swf http://valums.com/ajax-upload/