FileReader 未使用 AngularJS 正确加载文件 [英] FileReader not loading file properly using AngularJS
问题描述
我正在尝试将一个 csv 文件加载到 AngularJS 中,以便我可以对内容进行一些操作.它并不像我想要的那样工作.为了测试它是否正确加载,我将其加载到文本区域以查看内容.
当我加载文件时,它说它已正确加载,但 onload() 事件在我加载第二个 CSV 文件之前似乎不会触发,在这种情况下,第一个文件显示在文本区域中.>
HTML:
<输入 ng-model="csv"onchange="angular.element(this).scope().fileChanged()"type="file" accept=".csv" id="fileInput"/><br/><div><textarea ng-model="csvFile" readonly="true" style="width:99%; height:500px" disabled></textarea>
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 的新手,所以我不知道为什么会这样.
任何帮助都将不胜感激.
重新排列一些代码行,希望注释足够解释
$scope.fileChanged = function() {//定义读者var reader = new FileReader();//加载事件的处理程序(只是定义它,现在不执行它)reader.onload = function(e) {$scope.$apply(function() {$scope.csvFile = reader.result;});};//获取<输入>元素和选定的文件var csvFileInput = document.getElementById('fileInput');var csvFile = csvFileInput.files[0];//使用 reader 读取选中的文件//当读操作成功完成时,加载事件被触发//并由我们的 reader.onload 函数处理reader.readAsText(csvFile);};
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.
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.
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);
});
};
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.
Any help at all would be appreciated.
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
这篇关于FileReader 未使用 AngularJS 正确加载文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!