完全等待FileReader slice blob

Question

我正在尝试使用FileReader API读取文件数据，并且阅读了很多与此相同问题的问题，并试图实现他们的解决方案，但对于我的代码中的一些错误（也许）继续做错误的结果。当文件太大（超过15MB）时，为了避免浏览器崩溃，我决定开始使用'slice'方法。但问题是，因为FileReader onload事件是异步的，所以我得到代码的一部分，它应该尽快完成缓冲区，但仍然不完整。而且我不能在onload事件中做所有的事情，因为它只有总缓冲区的一部分。这里是我的代码：

function readBlob(opt_startByte, opt_stopByte) 
{ 
    var file = window.files[0]; 
    var start = parseInt(opt_startByte) || 0; 
    var stop = parseInt(opt_stopByte) || file.size - 1; 

    var reader = new FileReader(); 

    // If we use onloadend, we need to check the readyState. 
    reader.onload = function(evt) {   
     window.bits.push(CryptoJS.AES.encrypt(evt.target.result, window.password)); 
    }; 
    var blob = file.slice(start, stop + 1); 
    reader.readAsDataURL(blob); 
} 

function encrypt() 
{ 
    window.files = document.getElementById('encrypt-input').files; 
    if (!window.files.length) { 
     alert('Please select a file!'); 
     return; 
    } 
    window.password = $('#key').val(); 
    window.bits = []; 
    var startByte = 0;    
    var endByte = 0; 
    while(startByte <= document.querySelector('input[type=file]').files[0].size - 1) 
    {  
     endByte = startByte + 1024; 
     readBlob(startByte, endByte); 
     startByte = endByte; 
     if (startByte >= document.querySelector('input[type=file]').files[0].size) 
     { 
      alert('Here I want the total array length:' + window.bits.length);  
     } 
    } 
      alert('Here I want the total array length:' + window.bits.length);   
} 

正如你所看到的正上方，我尝试这样做：

if (startByte >= document.querySelector('input[type=file]').files[0].size) 
    { 
     alert('Here I want the total array length:' + window.bits.length);  
    } 

但我仍然得到出于某种原因，长度为0。如何在使用slice方法时处理整个缓冲区？另一个次要问题是：在onload事件中，我调用了一个同步函数'CryptoJS.AES.encrypt'，但由于这个事件是异步的，我期待浏览器在处理缓冲区时不会冻结到这个事件中。有没有什么办法可以实现某些功能，以避免在处理文件时冻结浏览器？

Answer 1

发生这种情况的原因是reader.readAsDataURL()是异步的。你必须回调传递给readBlob它完成时被称为：

function readBlob(opt_startByte, opt_stopByte, done) { 
    ... 
    reader.onload = function(evt) {   
     window.bits.push(CryptoJS.AES.encrypt(evt.target.result, window.password)); 
     done(); 
    }; 
    ... 
} 

function encrypt() {  
    ... 
    var startByte = 0;    
    var endByte = 0; 
    var callback = function(){ 
     alert('Here I want the total array length:' + window.bits.length); 
    }; 
    while(startByte <= document.querySelector('input[type=file]').files[0].size - 1) { 
     endByte = startByte + 1024; 
     (function(startByte, endByte, newCallback){ 
      callback = function(){ 
       readBlob(startByte, endByte, newCallback); 
      }; 
     })(startByte, endByte, callback); 
     startByte = endByte; 
    } 
    callback(); // run the chain 
} 

我们根本没有其他合理的方式，因为JavaScript没有一个sleep功能。

Answer 2

看来你需要这样做的“同步方式”。您可以在这里找到文档 - >http://www.w3.org/TR/FileAPI/#FileReaderSync。 我还发现了这个库 - FileReader.js（http://bgrins.github.io/filereader.js/），它不仅使您的生活更容易使用FileReader，而且还内置了使用同步方法同步读取文件的选项。 抱歉现在无法发布一些示例代码！无论如何，希望它有帮助！