如何使用FileReader的异步特性实现进度条和回调

Question

我在for循环中调用了FileReader API来遍历多个文件对象。我使用FileReader来显示图像的预览。

function() { 
    for (var i in Files) { 
     var fileReader = new FileReader(); 
     fileReader.readAsBinaryString(Files[i]); 
     fileReader.onload = function() { 

      // do something on FileReader onload 

     } 

     fileReader.onprogress = function(data) { 
      if (data.lengthComputable) {            
       var progress = parseInt(((data.loaded/data.total) * 100), 10); 
       console.log(progress); 
      } 
     } 
    } 

    // do something on completion of FileReader process 
    // actions here run before completion of FileReader 
} 

由于FileReader API的异步性质，我遇到了两个问题。首先，为每个FileReader实例启动onprogress事件。这给了我每个文件的进步。而我打算显示所有文件的总进度而不是单个文件。

其次，我想执行只应在FileReader的所有实例（每个文件一个）完成时才执行的操作。目前，由于FileReader是异步运行的，所以在FileReader完成任务之前运行这些操作。我搜索了很多，但还没有找到解决这些问题的方法。任何帮助表示赞赏。

Answer 1

让我们先解决你的第二个问题。你需要在一个单独的功能，一旦定义你的后完成代码，并调用它的所有文件都上传：

function() { 
    var total = Files.length; loaded = 0; 
    for (var i in Files) { 
     var fileReader = new FileReader(); 
     fileReader.readAsBinaryString(Files[i]); 
     fileReader.onload = function() { 

      // do something on FileReader onload 
      loaded++; 

      if (loaded == total){ 
       onAllFilesLoaded(); 
      } 
     } 

     fileReader.onprogress = function(data) { 
      if (data.lengthComputable) {            
       var progress = parseInt(((data.loaded/data.total) * 100), 10); 
       console.log(progress); 
      } 
     } 
    } 
} 

function onAllFilesLoaded(){ 
    //do stuff with files 
} 

现在，跟踪进度，还有你能解决几个不同的方式。现在你正在加载所有文件，每个文件都报告自己的进度。如果您不介意进度更新频率较低，则只需使用onload处理程序报告每次文件上传时的进度。如果你想要真正精细的，准确的进度更新，你将不得不计算所有文件合计的总大小，然后跟踪每个文件已加载的数量，并使用已加载的每个文件的总和文件比较所有文件的总大小来报告进度。

或者，假设您正在使用进度条而不是console.log来实现此功能，则可以为每个正在上载的文件提供一个单独的进度栏，并按照您现在正在进行的操作计算每个文件的进度，然后更新相应的进度条。让我知道是否有任何需要澄清。