FileReader無法正確加載文件使用AngularJS

Question

我想加載一個csv文件到AngularJS，所以我可以做一些操作的內容。這不是我想要的。爲了測試它是否正確加載，我將它加載到textarea中以查看內容。

當我加載文件時，它表示它正確加載，但onload（）事件似乎沒有被觸發，直到我加載第二個CSV文件，在這種情況下FIRST文件顯示在textarea中。

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); 
}; 

參考：FileReader at MDN

Answer 2

這僅僅是在HTML輕微改善：

<input type="file" onchange="angular.element(this).scope().file_changed(this)"/> 
<textarea cols="75" rows="15">{{ dataFile }}</textarea> 

和控制器：

.controller('MyCtrl', ['$scope', function($scope) { 
    var vm = $scope; 

    vm.file_changed = function(element){ 
     var dataFile = element.files[0]; 
     var reader = new FileReader(); 
     reader.onload = function(e){ 
      vm.$apply(function(){ 
       vm.dataFile = reader.result; 
      }); 
     }; 
     reader.readAsText(dataFile); 
    }; 
}]); 

Ref