FileReader无法使用AngularJS正确加载文件

Question

我正在尝试将CS​​V文件加载到AngularJS中，以便可以对内容进行一些操作。它不是我想要的那样工作。为了测试它是否正确加载，我将其加载到文本区域中以查看内容。

当我加载文件时，它说它已正确加载，但在加载第二个CSV文件之前似乎没有触发onload（）事件，在这种情况下，FIRST文件显示在文本区域中。

HTML：

<div>
  <input ng-model="csv"
            onchange="angular.element(this).scope().fileChanged()"
            type="file" accept=".csv" id="fileInput"/>
</div>
<br/>
<div>
  <textarea ng-model="csvFile" readonly="true" style="width:99%; height:500px" disabled></textarea>
</div>

JS：

$scope.fileChanged = function() {

  $scope.$apply(function() {
      var csvFileInput = document.getElementById('fileInput');
      var reader = new FileReader();
      var csvFile = csvFileInput.files[0];
      reader.onload = function(e) {
          $scope.csvFile = reader.result;
      };
      reader.readAsText(csvFile);
  });
};

当我将其放入JSFiddle时，该文件根本不会出现在textarea中。我是JSFiddle的新手，所以我不知道为什么会这样。

任何帮助将不胜感激。

Answer 1

重新排列代码的某些行，希望注释足够说明

$scope.fileChanged = function() {

  // define reader
  var reader = new FileReader();

  // A handler for the load event (just defining it, not executing it right now)
  reader.onload = function(e) {
      $scope.$apply(function() {
          $scope.csvFile = reader.result;
      });
  };

  // get <input> element and the selected file 
  var csvFileInput = document.getElementById('fileInput');    
  var csvFile = csvFileInput.files[0];

  // use reader to read the selected file
  // when read operation is successfully finished the load event is triggered
  // and handled by our reader.onload function
  reader.readAsText(csvFile);
};

参考：MDN的FileReader