CODEWITHSUNDEEP
javascripthttpfile-upload
dpq
dpq

Reputation: 9268

Queuing asynchronous HTTP file uploads

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.

Upvotes: 6

Views: 2799

Answers (8)

Erick T
Erick T

Reputation: 7439

In the recent past, I wrote a jQuery plug-in that would allow you to do something like this. I can't post the code, but I can describe how it worked. If it doesn't make sense, let me know, as it has been a while.

There were a set of upload form elements. When a file was selected, it would post to a hidden iFrame, the contents (via base64) of which were copied into a hidden form field. Then, when the final form is submitted, the contents of the hidden form fields are used to get the file information.

Erick

Upvotes: 0

albanx
albanx

Reputation: 6335

There is a simple efficent way of uploading files asyncronysly with xmlhttprequest: refer to https://developer.mozilla.org/en/using_xmlhttprequest in the "In Firefox 3.5 and later" section. With this you can upload files asyncronysly getting also the progress percent of upload. With firefox 3.6 and later you can also upload asyncronyly multiple files. I am making a js function for doing in a more simple way, when finish i will post it.

Upvotes: 0

Luca Rocchi
Luca Rocchi

Reputation: 6464

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

Upvotes: 0

37Stars
37Stars

Reputation: 2489

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.

Upvotes: 0

Jesse Hallam
Jesse Hallam

Reputation: 6964

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.

Upvotes: 2

vsr
vsr

Reputation: 3198

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

Upvotes: 0

Benson
Benson

Reputation: 22847

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"
});

Upvotes: 2

Darryl Hein
Darryl Hein

Reputation: 144947

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

Upvotes: 1

Related Questions