HTML5文件API:如何查看readAsText()的结果

Question

当readAsText()完成功能结果存储在.result

如何查看读取的文件内容是否正确.result？

 fr = new FileReader();
 fr.readAsText(file);
 var x = fr.result;
 console.log(x); //does not display anything on console

现在如何显示.result对象以验证内容？

Answer 1

readAsText是异步的,因此您需要使用onload回调来查看结果.

尝试这样的事情,

var fr = new FileReader();
fr.onload = function(e) {
    // e.target.result should contain the text
};
fr.readAsText(file);

更多信息,

https://developer.mozilla.org/en-US/docs/DOM/FileReader

Answer 2

即使在阅读了在线文档和示例之后，我也花了大约 300 个小时才弄清楚......

这是一些实际的工作代码：

let fileReader = new FileReader();
fileReader.onload = function(event) {
    alert(fileReader.result);
};
inputElement.onchange = function(event) {
    fileReader.readAsText(event.target.files[0]);
};

另外，仅供参考：

FileReader.onabort 事件的处理程序abort。每次读取操作中止时都会触发此事件。

FileReader.onerror 事件的处理程序error。每次读取操作遇到错误时都会触发该事件。

FileReader.onload 事件的处理程序load。每次读取操作成功完成时都会触发此事件。