用多个进度条上传HTML5文件 [英] HTML5 file uploading with multiple progress bars

问题描述

我正在通过XmlHTTPRequest和HTML5上传多个文件。我有上传工作正常，但我想有一个进度条，每个文件上传进行。但是，我所使用的代码使用上次进度条进行所有文件上传，而不是每次使用自己的进度条进行上传。所以这在客户端大部分是可视化的，但这真的让我烦恼。出于某种原因，我假设附加文件上传进度的事件覆盖自身并使用最后的进度条。这是我的代码：

  var files = event.dataTransfer.files; 
 
 //遍历每个要上传的文件，发送请求并附加进度事件
 for（var i = 0，file; file = files [i]; i ++）{
 var li = $（< li>+ file.name +< div class ='progressbar'>< / div>< / li>）; 
 
 //将LI添加到上传文件列表
 $（＃uploads）。append（li）; 
 
 //淡入LI而不是直接显示
 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）; 
 
 //检查上传完成的时间
 xhr.onreadystatechange = stateChange; 
 
 //设置并发送文件
 xhr.open（'POST'，'/ attachments'，true）; 
 xhr.setRequestHeader（'X-FILE-NAME'，file.name）; 
 xhr.send（file）; 
 
 
 
 $ b $ p 
 $ b我假设正确的li 进展事件。我怀疑有一些绑定我必须做，告诉进展事件使用一个特定的变量，因为它是李，但我不知道我错过了什么。
 
 <解决方案

您的示例无法正常工作，因为您没有考虑到当所有列表项已经创建时xhr progress事件被触发。但是有很多方法可以让你的例子工作。这个想法是让xhr知道它正在处理的清单项目。例如使用这个代码（我没有检查它是否工作，这个代码的目的是描述这个想法）：

pre $ code > var xhr = new XMLHttpRequest（）;
xhr.upload.li = li;
xhr.upload.addEventListener（'progress'，function（e）{
var percent = parseInt（e.loaded / e.total * 100）;
this.li.find（ .progressbar）.width（percent）;
}，false）;


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:

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 = $("<li>" + file.name + "<div class='progressbar'></div></li>");

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

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.

解决方案

Your example doesn't work properly becourse you don't take into account that xhr progress event is fired when all list items had been already created. However there are a lot of ways to make your example work. The idea is to let xhr know what exactly list item it is dealing with. For example use this code (I didn't check if it works. The purpose of this code is to describe the idea):

var xhr = new XMLHttpRequest();
xhr.upload.li = li;
xhr.upload.addEventListener('progress', function(e) {
    var percent = parseInt(e.loaded / e.total * 100);
    this.li.find(".progressbar").width(percent);
}, false);

这篇关于用多个进度条上传HTML5文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！