html5 图片上传进度条,带有多个进度条的HTML5文件上传

我通过XmlHTTPRequest和

HTML5上传多个文件.我上传工作正常,但我希望每个文件上传都有一个进度条.但是,我的代码使用最后一个进度条进行所有文件上传,而不是使用自己的进度条进行每次上传.所以这主要是客户端的视觉效果,但它真的很烦我.出于某种原因,我假设附加文件上传进度的事件会覆盖自己并使用最后一个进度条.这是我的代码：

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 = $("

" + file.name + "");

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

}

我假设“进展”事件没有正确读取正确的“li”.我怀疑我必须要做某种绑定来告诉“progress”事件使用特定变量,因为它是“li”,但我不确定我缺少什么.