javascript FileReader 未使用 AngularJS 正确加载文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26165919/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
FileReader not loading file properly using AngularJS
提问by UpAllNight
I'm trying to load a csv file into AngularJS so I can do some manipulation on the contents. It is not quite working as I want it to. To test if it is loading properly, I am loading it into a textarea to view the contents.
我正在尝试将一个 csv 文件加载到 AngularJS 中，以便我可以对内容进行一些操作。它并不像我想要的那样工作。为了测试它是否正确加载，我将它加载到 textarea 中以查看内容。
When I load the file, it says it is loaded properly but the onload() event doesn't seem to be firing until I load a second CSV file, in which case the FIRST file is displayed in the textarea.
当我加载文件时，它说它已正确加载，但在我加载第二个 CSV 文件之前，onload() 事件似乎不会触发，在这种情况下，第一个文件显示在文本区域中。
HTML:
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:
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);
});
};
And when I put this into JSFiddle, the file doesn't appear in the textarea at all. I'm new with JSFiddle so I don't know why that is happening.
当我将其放入 JSFiddle 时，该文件根本不会出现在 textarea 中。我是 JSFiddle 的新手，所以我不知道为什么会这样。
Any help at all would be appreciated.
任何帮助都将不胜感激。
回答by przno
Reordering some lines of your code, hope the comments are explanatory enough
重新排序你的一些代码行，希望注释足够解释
$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);
};
Reference: FileReader at MDN
回答by Jorge Cortes
This is just a minor improvement in HTML:
这只是 HTML 的一个小改进：
<input type="file" onchange="angular.element(this).scope().file_changed(this)"/>
<textarea cols="75" rows="15">{{ dataFile }}</textarea>
and controller:
和控制器：
.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);
};
}]);
