javascript - addevenlistener を使用してさまざまな進行状況バーの値を更新する

Question

ユーザーが HTML5 DnD とファイル API を使用して複数のファイルをアップロードし、 xmlhttprequest を使用してサーバーにデータを送信するシナリオがあります。ファイルのステータスについてユーザーにフィードバックするために、私のコードは各ファイルの JavaScript を使用して動的に進行状況バー要素を作成します。以下はそれを行う私のコードです

for(var i=0;i< files.length;i++)
    { 
    var row = tbl.insertRow(i);
    var cell1=row.insertCell(0);
    var cell2=row.insertCell(1);
    var cell3=row.insertCell(2);
    arr[i]=i;
    cell1.innerHTML=files[i].name;
    cell2.innerHTML=(Math.round(files[i].size/1024)==0?(files[i].size>0?1:0):(Math.round(files[i].size/1024)))+" KB";
    cell3.innerHTML="&nbsp;"+"<progress id=progress"+i+" max=100></progress>";
    var theForm=document.forms["DocumentForm"];
    var theDupe="progress"+i;
    xhr[i]=new XMLHttpRequest(); // this is an array, bcoz of multiple files

    xhr[i].upload.addEventListener("progress", function(evt ){  var theForm=document.forms["DocumentForm"]; var bar=document.getElementById(theDupe);  if (evt.lengthComputable) {  var currentValue=bar.value;  var percentComplete = Math.round(evt.loaded * 100 / evt.total); bar.value=currentValue+parseInt(percentComplete); }    }, false);  

    xhr[i].open('POST',url);
    xhr[i].send(data);   

現在、進行状況バーは 1 つしか更新されません。複数の進行状況バーを同時に更新するにはどうすればよいですか?