Javascript文件阅读器答案

【问题标题】：Javascript File ReaderJavascript文件阅读器
【发布时间】：2012-07-30 16:07:52
【问题描述】：

我可能只是不了解文件阅读器 api，但是

当我尝试运行时：

for (var i = 0, f1, f2; f1 = files[sorted_index[i]], f2 = files[sorted_index[i+1]]; i=i+2) {
    var file_one;
    var file_two;

    if(f1.size < f2.size){
        file_one = f1;
        file_two = f2;
    } else {
        file_one = f2;
        file_two = f1;
    }

    var file_one_contents;
    var file_two_contents;


  var reader = new FileReader();
  reader.readAsText(file_one);
  reader.onload = readSuccess;

  function readSuccess(evt){
    file_one_contents = evt.target.result;
  }
  var reader = new FileReader();
    reader.readAsText(file_two);
    reader.onload = readSuccess2;

  function readSuccess2(evt2){
    file_two_contents = evt2.target.result;
  }

    console.log(file_one_contents);
    console.log(file_two_contents);

控制台日志只包含undefined。脚本的目标是读取两个 CSV，然后从这对文件中获取数据并进行一些计算。

谢谢！

【问题讨论】：

标签： javascript filereader

【解决方案1】：

API 异步。操作完成时会调用“成功”函数，但不会立即执行。

将您的console.log() 调用移动到内部处理函数。

edit — 如果您需要等到两个文件都准备好后再开始执行操作，您可以执行以下操作：

  var countdown = 2;

  var reader = new FileReader();
  reader.readAsText(file_one);
  reader.onload = readSuccess;

  function readSuccess(evt){
    file_one_contents = evt.target.result;
    countdown--;
    if (countdown === 0) go();
  }
  var reader = new FileReader();
    reader.readAsText(file_two);
    reader.onload = readSuccess2;

  function readSuccess2(evt2){
    file_two_contents = evt2.target.result;
    countdown--;
    if (countdown === 0) go();
  }

当然，还有更复杂的方法可以做到这一点，但这个简单的技巧只是等到计数器为零后再调用“go()”，它表示处理文件的函数。

【讨论】：

那么在我开始操作之前如何让它等待文件上传？
对了，那有没有办法把信息从handler函数中传出去，以后再用呢？
@StevenStangle 使用您当前的方法，您需要 Array 或 FileReaders。
@StevenStangle 不，没有。只需从这些回调中调用处理文件的函数。
@Pointy 但文件链接在一起，您需要同时进行处理。那么就不可能同时使用两者吗？

【解决方案2】：

我有一个类似的问题，它通过使用“.onloadend”而不是“onload”解决了文件读取等待。在下面的代码中，x 绑定到一个“div”元素

reader.onloadend = function (evt) {
    x.innerHTML = evt.target.result;
}

对于“onload”，一切都是未定义的。

【讨论】：