读取多个文件后的回调函数

Question

我正在做类似的事情http://www.html5rocks.com/en/tutorials/file/dndfiles/

我正在做的是我一次一个地阅读所选文件的内容,以验证他们的行通过一些正则表达式测试.在完成所有文件的验证后,我需要相应地更新(启用/禁用)一些按钮,从而实现回调功能

是否有可能有一个回调函数,它会在读完所有内容后执行某些操作？

HTML:

<input type="file" id="files" name="files[]" multiple />

javascipt的:

<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // files is a FileList of File objects. List some properties.
    var validArray = [];
    for (var i = 0, f; f = files[i]; i++) {
        //Create new file reader
        var r = new FileReader();
        //On load call
        r.onload = (function (f) {
            return function (e) {
                var contents = e.target.result;
                var lines = contents.split('\n');

                for(var i=0; i<lines.length; i++){
                    //Validate regex of line here
                    //If line does not pass, append file name to validArray and break  
                }

            };
        })(f);
        r.readAsText(f);
    }
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

Answer 1

来这里寻找类似的答案.我想在加载和处理所有文件后调用一个函数.@Snuffleupagus提供的解决方案对我不起作用,因为在读取所有文件之后,但在onload函数中完成处理之前调用了该函数.我找到了一个解决方案如下(不确定它是否是'最干净'但它对我有用).

var processedCount=0; // global variable
var totalFiles = 0; // global variable

function handleFileSelect(evt) {
  var files = evt.target.files; // FileList object

  totalFiles = files.length; // important

  // files is a FileList of File objects. List some properties.
  for (var i = 0, f; f = files[i]; i++) {
    //Create new file reader
    var r = new FileReader();
    //On load call
    r.onload = (function(theFile){
        return function(){
          onLoadHandler(this,theFile);
          onLoadEndHandler();
       };
    })(f);
    r.readAsText(f);
  }
}

function onLoadEndHandler(){
  processedCount++;
  if(processedCount == totalFiles){ 
    // do whatever - this code will run after everything has been loaded and processed
  }
}

我试图使用r.onloadend,但是很快就被调用了.我相信因为我的函数'onLoadHandler'需要几秒钟来处理每个文件,并且当文件加载完成但在'onload'内的代码完成运行之前调用onloadend.