HTML5文件上傳塊/切片導致高CPU使用率

所以，我正在實施用HTML5的大文件文件上傳器。我正在使用新的片/塊來將文件分割成更小的塊，以便暫停/恢復以供稍後實施。然而，每次我嘗試上傳（它的工作），但它需要大量的內存和CPU使用率（它可以達到100％的CPU使用率）。我嘗試不同大小的塊文件，但沒有幫助。HTML5文件上傳塊/切片導致高CPU使用率

任何人都知道什麼是錯的？以及如何解決它？該應用程序應該能夠支持高達4GB /文件，當然還有多個文件，因此可能會達到20GB等。

注意：請不要包含java或flash的解決方案。因爲我已經有了Java版本。我只是試圖用HTML5來重寫。下面是代碼

 function sendRequest() {  
      var file = document.getElementById('fileToUpload'); 

      for(var i = 0; i < file.files.length; i++) {  
       var blob = file.files[i];   
       var originalFileName = blob.name; 
       var filePart = 0 

       const BYTES_PER_CHUNK = 5 * 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) { 
         //for Google Chrome 
         var chunk = blob.webkitSlice(start, end); 
        } else if (blob.mozSlice) { 
         //for Mozilla Firefox 
         var chunk = blob.mozSlice(start, end); 
         //pausecomp(5000); 
        }  

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


     function uploadFile(blobFile, fileName, filePart, totalChunks, divBarsSelector) { 
      if(filePart == 0) { 
       bars = document.querySelector('#bars' + divBarsSelector); 
      } 

      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 + filePart, true); 

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

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

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

來源

2012-06-26 Harts

目前，切片循環開始爲每個塊上傳，而不用等待前面的塊完成。在開始上傳下一個塊之前，您的切片循環應該等到上傳器完成當前塊。 –

我遇到了同樣的問題，我正在使用websockets，並且在收到大塊後只發送更多塊，但仍然出現了錯誤 – andrei

@DanD。所以你的意思是現在http請求直接發送到服務器後，我應該順序發送每個請求，而不是paralelly？你有示例代碼或什麼？因爲我不知道該怎麼做。謝謝 – Harts

爲了避免這個問題，我們需要使用webworkers上傳文件，通過使用webworkers我們可以降低CPU使用率。

您可以使用chrome taskmanager測試在chrome中使用和不使用webworkers的差異。

來源

2012-07-18 07:45:59

HTML5文件上傳塊/切片導致高CPU使用率

回答

相關問題