html FileReader未使用AngularJS正确加载文件

p4tfgftt 于 2022-11-27 发布在 Angular

关注(0)|答案(3)|浏览(148)

我正在尝试将一个csv文件加载到AngularJS中，这样我就可以对内容进行一些操作。它并没有像我希望的那样工作。为了测试它是否正确加载，我将它加载到一个文本区域中查看内容。
当我加载文件时，它说它已正确加载，但onload（）事件似乎没有触发，直到我加载第二个CSV文件，在这种情况下，第一个文件显示在文本区域中。
于飞：

<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中时，这个文件根本不出现在文本区域中。我是JSFiddle的新手，所以我不知道为什么会发生这种情况。
任何帮助都将不胜感激。

Html

来源：https://stackoverflow.com/questions/26165919/filereader-not-loading-file-properly-using-angularjs

3条答案

按热度按时间

0yg35tkg1#

对代码的某些行重新排序，希望注解足够说明问题

$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

赞(0）回复(0）举报 2022-11-27

new9mtju2#

这只是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

赞(0）回复(0）举报 2022-11-27

9ceoxa923#

如果不想使用$scope.$apply()，可以使用$timeout：

const fileReader = new FileReader();
            
fileReader.onload = (event) => {
    this.$timeout(() => {
        // Logic goes here...
    }, 0);
};

...

赞(0）回复(0）举报 2022-11-27

我来回答

html FileReader未使用AngularJS正确加载文件

3条答案

相关问题

热门标签

最新问答