Geek Answers Handbook

Download an Asynchronous HTTP Queue Queue

Is there a way to upload files to the queue without resorting to Flash or Silverlight, only with artfully used forms and JavaScript? Please note that loading should be done asynchronously.

By “queueing” upload, I mean that if a user tries to upload multiple files, they should not be transferred at the same time, but one at a time in the same HTTP connection.

+6
javascript file-upload
source share
8 answers

I do not think it is possible to do this on a single HTTP connection due to specification limitations. However, you can get almost the same behavior by placing the <input> fields in separate forms (whether using HTML or JavaScript) and submitting them in order.

Put your goals on an <iframe> and use the iframe.onload event to trigger the next form on the list.

Additional notes:

  • See this for reference targeting iframes. Please note that this feature is not supported in HTML / XHTML Strict.
  • The form.target attribute must be equal to the iframe.name attribute. iframe.id will not work; This causes a popup in IE6 and FF3.5.
  • A working example of all-at-once loading using targeting is available here . I cleaned up this example a bit and used it. It works in IE6 as well as in a first class browser.
+2
source

I have a good reputation that Uploadify is very good. In addition, it supports queues natively. A simple example, assuming that you have already created an element of the form "file" with the identifier "foo" and an element that will be used as a queue with the identifier "queue". See the docs for more information.

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

One option I saw earlier, although I don't have a link or example, uses an iframe. Basically, files are sent to the iframe and JavaScript clock to see when this iframe reloads, and then sends the next one. This is ugly, and I think I tried, but could not get it to work in browsers (which I needed at the time, including IE6).

+1
source

Carefully looking at this, what needs to be done:

  • The function of dynamically adding forms (in html) with the type of input as a file. In one form there will be only one file input field. These forms will be our file upload queue.
  • A submit function that will submit these forms one by one asynchronously.

This simple logic that I can think of now [should code when I get home].

0
source

If you are looking for .Net and more specifically Asp.Net MVC solution, check out this post, http://dimebrain.com/2010/01/large-or-asynchronous-file-uploads-in-asp-net-mvc.html . I used it for reference.

0
source

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

0
source

There is a simple, efficient way to download asyncronysly files using xmlhttprequest: refer to https://developer.mozilla.org/en/using_xmlhttprequest in the section “In Firefox 3.5 and later versions. With this you can download asyncronysly files, also receiving a percentage run download. With firefox 3.6 and later, you can also upload multiple files asynchronously. I make the js function to execute in a simpler way, when I finish, I will publish it.

0
source

In the recent past, I wrote a jQuery plugin that will allow you to do something like this. I cannot post the code, but I can describe how it works. If that doesn't make sense, let me know how long ago it was.

A set of upload form elements has appeared. When the file was selected, it would send a hidden iFrame whose contents (via base64) were copied to the hidden form field. Then, when the final form is submitted, the contents of the hidden form fields are used to obtain information about the file.

Eric

0
source

More articles:


All Articles