多个进度条/ html5文件上传

这不是整个代码，但我认为它的相关部分。我怎样才能使每个文件动态创建一个单独的进度栏放入dropzone？多个进度条/ html5文件上传

function sendFile(file) { 
    xhr.upload.addEventListener('progress', function (ev) { 
     var bar = document.getElementById("progressBar"); 
     progressBar.value += percentComplete; 
    }, false); 

    dropzone.ondrop = function (event) { 
     event.stopPropagation(); 
     event.preventDefault(); 

     var filesArray = event.dataTransfer.files; 
     for (var i = 0; i < filesArray.length; i++) { 
      sendFile(filesArray[i]); 
      //trigger progress bar with sendFile 

      document.getElementById('file').innerHTML += '<li>' + filesArray[i].name + '&nbsp;' + '<progress id="progressBar"  value="0" max="100"></progress></div></li>'; 
     } 
    }

来源

2012-07-18 user1496978

不知道你到底想要什么。这是不够的相关代码。什么是progressBar？什么是perecentComplete？看起来像ondrop的东西应该在sendFile函数之外，但它的内部。 – 2012-07-18 20:01:19

我在你的代码中使用jQuery的轻微变化。

function sendFile(file) { 
     xhr.upload.addEventListener('progress', function (ev) { 
      var bar = document.getElementById("progressBar"); 
      progressBar.value += percentComplete; 
     }, false); 

     dropzone.ondrop = function (event) { 
      event.stopPropagation(); 
      event.preventDefault(); 

      var filesArray = event.dataTransfer.files; 
      for (var i = 0; i < filesArray.length; i++) { 
       sendFile(filesArray[i]); 
       //trigger progress bar with sendFile 
    $('#outputlist').append('<li>'+fileArray[i].name+' <progress value="0" max="100"></progress></li>'); 

      } 
     }

让我们来找你必须更新对应的文件名progressbars点，这是一个challange。

<progress id=fileArray[i].name value="0" max="100"></progress>

您可以使用文件名更新进度条。

来源

2012-07-19 11:37:02

多个进度条/ html5文件上传

回答

相关问题