FileReader类型之文字读取

一、什么是FileReader类型?

FileReader类型实现的是一种异步文件读取机制，通常可以用于读取文本文件和图片文件，而本文只单独讲讲文本文件的读取。

使用FileReader读取文本文件内容主要用到以下方法、事件和属性：

方法： readAsText()
事件： load
属性： result

二、结合具体实例讲解文字读取流程

1. HTML结构

主要用到input元素，type属性值为file，用于从本地获取文件。

<input type="file" id="file" />

通过以上代码在选择文件时一次只能选择一个，若要一次选择多个文件，可在标签上加上multiple="multiple"属性值，或者直接写multiple。

<input type="file" id="file" multiple="multiple" />

或者：

<input type="file" id="file" multiple />

2. 给input元素加上change事件

var file = document.getElementById("file");
file.addEventListener('change',function(){
    //........  
});

当我们点击按钮并成功选择文件时会执行以下 3 中的代码。

3. 读取文本文件中的文字内容

① 获取已从本地选择的文件

var fileVal = this.files[0];    // 获取所选文件中的第一个文件

这里用到了 File API，每个 File 对象对应一个文件，每个 File 对象有下面几种属性：

name： 本地文件名
size： 文件的字节大小
type： 文件的 MIME 类型
lastModifiedDate： 文件上一次被修改的时间

比如想要获取文件名可以这样写：

var fileName = this.files[0].name   // 获取到的文件名中包含文件后缀

② 新建 FileReader 对象

var reader = new FileReader();

③ 读取文件中的文字内容

reader.readAsText(fileVal,'gb2312');

readAsText() 用于将文件中的内容以纯文本的形式读取，读取到的文本会保存在 result 属性中（注意该方法执行没有返回值），可传入两个参数：文件对象和文本编码类型。

注意： 这里第二个参数最好写上'gb2312'编码类型，否则可能出现文字乱码问题。

④ 文件读取成功后输出文本内容

reader.onload = function(){
    var text = this.result;
    console.log(text);
};

通过 readAsText() 方法读取到的纯文本内容保存在 result 属性中。

三、最终完整实例代码

为了让大家能够从整体上更加清晰的了解文字读取的流程，在此贴上以上实例中的完整代码：

<!--HTML部分-->
<input type="file" id="file" multiple />

// 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);
    };
});

以上代码中，text.split('\n').join('<br>')的作用是将文本文件中的换行符转换为<br>，\n代表文本回车换行。