多個進度條/ 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文件上傳

回答

相關問題