这个视频我们通过一个实例来演示一下使用 readAsText 方法去读文件 … 选择一个文本文件以后，会直接把读取到的内容输出到页面上 …

这里我用到的代码跟之前介绍文件列表的代码差不多，你可以课程的资料包里找到。如果你看到之前的视频，你应该知道它们都是做啥用的。

displayFileInfo()

在这个用来显示文件信息的 displayFileInfo() 函数里面，我们先去新建一个文件阅读器 … 可以在循环之外去创建 … 这样在循环的里面，可以一直使用这个阅读器去读取用户选择的文件 …

// 新建文件阅读器
var reader = new FileReader();

在循环里面，使用这个 reader 去读文件 … reader.readAsText(file[i]);

下面我们可以去监听阅读器的 load 事件 … 这个事件在读完文件以后发生 … 发生以后，会执行阅读器的 onload … 我们可以直接设置 onload 做的事 …

reader.onload = function(event) {}

这里我用了一个匿名函数 … 把事件返回的对象交给这个函数 … 这个事件对象的 target 里的 result 里面，会包含读取的文件内容 …

在列表内容的 createTextNode 里面，直接使用读取到的文件内容 …

var content = document.createTextNode(event.target.result);

保存 …

回到浏览器，刷新 … 然后 浏览文件 … 找到一个文本类型的文件 … 打开 …

在页面上，会直接输出读取到的文件里面的内容 …