청크 파일 용 HTML5 진행률 막대

Question

파일을 업로드하고 html5 청킹을 사용하여 파일을 조각 내기위한 코드가 있습니다. 현재 진행률 막대는 파일의 모든 덩어리에 대한 것이므로 하나의 진행률 표시 줄로 만들려면 어떻게해야합니까? 모든 덩어리에 대한 응답의 경우에는 어떻게해야합니까? 예를 들어, 예제 코드 및 사진 : 각 진행률 표시 줄 만 등 한 바 있지만 아직 정확한 비율을 가지고에 그 진행 표시 줄을 결합하여 하나의 파일의 덩어리 (1메가바이트)하지만 방법에 해당

 var uploaders = []; 
     var totalChunks = 0; 
     var i = 0; 
     $(document).ready(function() { 
      var progress = document.querySelector('progress'); 
      var bars = document.querySelector('#bars'); 
     });   


     //function for after the button is clicked, slice the file 
     //and call upload function 
     function sendRequest() {  
      //clean the screen 
      //bars.innerHTML = ''; 
      var blob = document.getElementById('fileToUpload').files[0]; 
      var originalFileName = blob.name; 
      const BYTES_PER_CHUNK = 1 * 1024 * 1024; // 10MB chunk sizes. 
      const SIZE = blob.size; 

      var start = 0; 
      var end = BYTES_PER_CHUNK; 
      totalChunks = Math.ceil(SIZE/BYTES_PER_CHUNK); 

      while(start < SIZE) {      
       if (blob.webkitSlice) { 
        var chunk = blob.webkitSlice(start, end); 
       } else if (blob.mozSlice) { 
        var chunk = blob.mozSlice(start, end); 
       }  

       uploadFile(chunk, originalFileName, totalChunks); 
       start = end; 
       end = start + BYTES_PER_CHUNK; 
      } 
     } 


     function uploadFile(blobFile, fileName, totalChunks) { 
      var progress = document.createElement('progress'); 
      progress.min = 0; 
      progress.max = 100; 
      progress.value = 0; 
      bars.appendChild(progress); 

      var fd = new FormData(); 
      fd.append("fileToUpload", blobFile); 

      var xhr = new XMLHttpRequest();     
      xhr.open("POST", "upload.php"+"?"+"file="+fileName + i, true); 
      i++; 

      xhr.onload = function(e) { 
       //make sure if finish progress bar at 100% 
       progress.value = 100; 

       //counter if everything is done using stack 
       uploaders.pop(); 

       if (!uploaders.length) { 
        bars.appendChild(document.createElement('br')); 
        bars.appendChild(document.createTextNode('DONE :)')); 
        mergeFile(fileName, totalChunks); 
       }     
      }; 

      // Listen to the upload progress for each upload. 
      xhr.upload.onprogress = function(e) {; 
       if (e.lengthComputable) { 
        progress.value = (e.loaded/e.total) * 100; 
       } 
      };     

      uploaders.push(xhr); 
      xhr.send(fd); 
     }       

Answer 1

당신 지금까지 총 업로드 된 바이트를 보유하는 전역 변수를 유지하고 진행 핸들러에서 업데이트해야합니다. uploadFile() 내부

var totalLoaded = 0 

:

Btw는

var chunkLoaded = 0; 
.... 
function(e) { 
    var prevLoaded = chunkLoaded; 

    if (e.lengthComputable) { 
    // use e.loaded and e.total as a percentage of bytes per chunk 
    // upload request contains more bytes than the actual chunk 
    chunkLoaded = Math.ceil(e.loaded/e.total * BYTES_PER_CHUNK); 
    totalLoaded = totalLoaded - prevLoaded + chunkLoaded; 
    // update progress bar here 
    } 
} 

, 당신은 같은 시간에 20 개 덩어리를 업로드? 그것은 일반적으로 건강에 좋지 않으며 연결을 끊는 경향이 있습니다 (청크를 다시 시도하려는 경우 totalLoaded도 업데이트해야 함).

동시 업 로더의 수를 2/3로 제한하는 것이 좋습니다.