带有多个进度条的HTML5文件上传

前端之家收集整理的这篇文章主要介绍了带有多个进度条的HTML5文件上传前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我通过XmlHTTPRequest和 HTML5上传多个文件.我上传工作正常,但我希望每个文件上传都有一个进度条.但是,我的代码使用最后一个进度条进行所有文件上传,而不是使用自己的进度条进行每次上传.所以这主要是客户端的视觉效果,但它真的很烦我.出于某种原因,我假设附加文件上传进度的事件会覆盖自己并使用最后一个进度条.这是我的代码
  1. var files = event.dataTransfer.files;
  2.  
  3. // iterate over each file to upload,send a request,and attach progress event
  4. for (var i = 0,file; file = files[i]; i++) {
  5. var li = $("<li>" + file.name + "<div class='progressbar'></div></li>");
  6.  
  7. // add the LI to the list of uploading files
  8. $("#uploads").append(li);
  9.  
  10. // fade in the LI instead of just showing it
  11. li.hide().fadeIn();
  12.  
  13. var xhr = new XMLHttpRequest();
  14.  
  15. xhr.upload.addEventListener('progress',function(e) {
  16. var percent = parseInt(e.loaded / e.total * 100);
  17. li.find(".progressbar").width(percent);
  18. },false);
  19.  
  20. // check when the upload is finished
  21. xhr.onreadystatechange = stateChange;
  22.  
  23. // setup and send the file
  24. xhr.open('POST','/attachments',true);
  25. xhr.setRequestHeader('X-FILE-NAME',file.name);
  26. xhr.send(file);
  27. }

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

解决方法

您的示例无法正常工作,因为您没有考虑在已创建所有列表项时触发xhr progress事件.但是,有很多方法可以使您的示例正常工作.我们的想法是让xhr知道它正在处理的确切列表项.例如,使用此代码(我没有检查它是否有效.此代码的目的是描述这个想法):
  1. var xhr = new XMLHttpRequest();
  2. xhr.upload.li = li;
  3. xhr.upload.addEventListener('progress',function(e) {
  4. var percent = parseInt(e.loaded / e.total * 100);
  5. this.li.find(".progressbar").width(percent);
  6. },false);

猜你在找的HTML5相关文章