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”,但我不确定我缺少什麼.