Question

我有一个场景，用户使用HTML5 DnD和文件API上传多个文件，使用xmlhttprequest将数据发送到服务器。为了向用户反馈文件状态，我的代码使用javascript为每个文件动态创建prograss bar元素。下面是我的代码

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

现在只有一个进度条得到更新，如何同时更新多个进度条？

使用addeventlistener更新不同的进度条值

0 个答案: