Databases
StackOverflow2013
Postsdbo
POHTML5 file uploading with multiple progress bars
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML5 file uploading with multiple progress bars
    text
    copied!<p>I'm uploading multiple files via XmlHTTPRequest and HTML5. I have the uploading working fine, but I would like to have a progress bar for each file upload going on. The code I have, however, uses the last progress bar for ALL of the file uploads instead of each upload using its own progress bar. So this is mostly visual on the client-side, but it's really annoying me. For some reason I'm assuming that the event that attaches the progress of the file upload overwrites itself and uses the last progress bar. Here's my code:</p> <pre><code>var files = event.dataTransfer.files; // iterate over each file to upload, send a request, and attach progress event for (var i = 0, file; file = files[i]; i++) { var li = $("&lt;li&gt;" + file.name + "&lt;div class='progressbar'&gt;&lt;/div&gt;&lt;/li&gt;"); // add the LI to the list of uploading files $("#uploads").append(li); // fade in the LI instead of just showing it li.hide().fadeIn(); var xhr = new XMLHttpRequest(); xhr.upload.addEventListener('progress', function(e) { var percent = parseInt(e.loaded / e.total * 100); li.find(".progressbar").width(percent); }, false); // check when the upload is finished xhr.onreadystatechange = stateChange; // setup and send the file xhr.open('POST', '/attachments', true); xhr.setRequestHeader('X-FILE-NAME', file.name); xhr.send(file); } </code></pre> <p>I'm assuming that the proper "li" is not getting read properly by the "progress" event. I suspect there's some sort of binding I have to do to tell the "progress" event to use a particular variable as it's "li", but I'm not sure what I'm missing.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload