FileReader类型之文字读取-阿里云开发者社区

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

一、什么是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代表文本回车换行。
                【C 语言】文件操作 ( 配置文件读写 | 写出或更新配置文件 | 逐行遍历文件文本数据 | 获取文件中的文本行 | 查询文本行数据 | 追加文件数据 | 使用占位符方式拼接字符串 )
            【C 语言】文件操作 ( 配置文件读写 | 写出或更新配置文件 | 逐行遍历文件文本数据 | 获取文件中的文本行 | 查询文本行数据 | 追加文件数据 | 使用占位符方式拼接字符串 )
                JAVA之旅（二十七）——字节流的缓冲区，拷贝mp3，自定义字节流缓冲区，读取键盘录入，转换流InputStreamReader，写入转换流，流操作的规律
            JAVA之旅（二十七）——字节流的缓冲区，拷贝mp3，自定义字节流缓冲区，读取键盘录入，转换流InputStreamReader，写入转换流，流操作的规律
我们继续来聊聊I/O
一.字节流的缓冲区
这个，和我们的字符流基本上没有什么差别，我们来拷贝mp3，看例子
// 通过字节流的缓冲区.