一、什么是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,看例子 // 通过字节流的缓冲区.