一、什么是FileReader类型?
FileReader类型实现的是一种异步文件读取机制，通常可以用于读取文本文件和图片文件，而本文只单独讲讲文本文件的读取。
使用FileReader读取文本文件内容主要用到以下方法、事件和属性：
方法： readAsText()
事件： load
属性： result
二、结合具体实例讲解文字读取流程
1. HTML结构
主要用到input元素，type属性值为file，用于从本地获取文件。
<input type="file" id="file" />
AI 代码解读
通过以上代码在选择文件时一次只能选择一个，若要一次选择多个文件，可在标签上加上multiple="multiple"属性值，或者直接写multiple。
<input type="file" id="file" multiple="multiple" />
AI 代码解读
或者：
<input type="file" id="file" multiple />
AI 代码解读
2. 给input元素加上change事件
var file = document.getElementById("file");
file.addEventListener('change',function(){
//........
});
AI 代码解读
当我们点击按钮并成功选择文件时会执行以下 3 中的代码。
3. 读取文本文件中的文字内容
① 获取已从本地选择的文件
var fileVal = this.files[0]; // 获取所选文件中的第一个文件
AI 代码解读
这里用到了 File API，每个 File 对象对应一个文件，每个 File 对象有下面几种属性：
name： 本地文件名
size： 文件的字节大小
type： 文件的 MIME 类型
lastModifiedDate： 文件上一次被修改的时间
比如想要获取文件名可以这样写：
var fileName = this.files[0].name // 获取到的文件名中包含文件后缀
AI 代码解读
② 新建 FileReader 对象
var reader = new FileReader();
AI 代码解读
③ 读取文件中的文字内容
reader.readAsText(fileVal,'gb2312');
AI 代码解读
readAsText() 用于将文件中的内容以纯文本的形式读取，读取到的文本会保存在 result 属性中（注意该方法执行没有返回值），可传入两个参数：文件对象和文本编码类型。
注意： 这里第二个参数最好写上'gb2312'编码类型，否则可能出现文字乱码问题。
④ 文件读取成功后输出文本内容
reader.onload = function(){
var text = this.result;
console.log(text);
};
AI 代码解读
通过 readAsText() 方法读取到的纯文本内容保存在 result 属性中。
三、最终完整实例代码
为了让大家能够从整体上更加清晰的了解文字读取的流程，在此贴上以上实例中的完整代码：
<!--HTML部分-->
<input type="file" id="file" multiple />
AI 代码解读
// JavaScript部分
var file = document.getElementById("file");
file.addEventListener('change',function(){
var fileVal = this.files[0];
var reader = new FileReader();
reader.readAsText(fileVal,'gb2312');
reader.onload = function(){
var text = this.result;
var p = document.createElement('p');
p.innerHTML = text.split('\n').join('<br>');
document.body.appendChild(p);
};
});
AI 代码解读
以上代码中，text.split('\n').join('<br>')的作用是将文本文件中的换行符转换为<br>，\n代表文本回车换行。
