文章の目录

  • 一、概述
  • 二、构造函数
  • 1、语法
  • 三、实例属性
  • 1、error
  • 1.1、语法
  • 1.2、返回值
  • 2、readyState
  • 2.1、语法
  • 2.2、值
  • 3、result
  • 3.1、语法
  • 3.2、值
  • 四、实例方法
  • 1、abort()
  • 1.1、语法
  • 2、readAsArrayBuffer()
  • 2.1、概述
  • 2.2、语法
  • 2.3、参数
  • 3、readAsDataURL()
  • 3.1、语法
  • 3.2、参数
  • 4、readAsText()
  • 4.1、语法
  • 4.2、参数
  • 五、事件
  • 1、abort（中止事件）
  • 2、error
  • 3、load
  • 4、loadend
  • 5、loadstart
  • 6、progress
  • 写在最后


一、概述

FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

二、构造函数

使用 FileReader() 构造器去创建一个新的 FileReader。

1、语法

var reader = new FileReader();

三、实例属性

1、error

返回读取文件时的错误信息

1.1、语法

var error = instanceOfFileReader.error

1.2、返回值

返回一个 DOMError

2、readyState

提供 FileReader 读取操作时的当前状态。

2.1、语法

var state = instanceOfFileReader.readyState

2.2、值

state一个数字，用来表示 FileReader 的三种可能状态。

3、result

返回文件的内容。只有在读取操作完成后，此属性才有效，返回的数据的格式取决于是使用哪种读取方法来执行读取操作的。

3.1、语法

var file = instanceOfFileReader.result

3.2、值

一个字符串或者一个ArrayBuffer ，这取决于读取操作是使用哪种方法来进行的。

四、实例方法

1、abort()

该方法可以取消 FileReader 的读取操作，触发之后 readyState 为已完成（DONE）。

1.1、语法

instanceOfFileReader.abort();

2、readAsArrayBuffer()

2.1、概述

FileReader 接口提供的 readAsArrayBuffer() 方法用于启动读取指定的 Blob 或 File 内容。当读取操作完成时，readyState 变成 DONE（已完成），并触发 loadend 事件，同时 result 属性中将包含一个 ArrayBuffer 对象以表示所读取文件的数据。

2.2、语法

instanceOfFileReader.readAsArrayBuffer(blob);

2.3、参数

  • blob
    即将被读取的 Blob 或 File 对象。

3、readAsDataURL()

readAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成DONE，并触发 loadend 事件，同时 result 属性将包含一个data:URL 格式的字符串（base64 编码）以表示所读取文件的内容。

3.1、语法

instanceOfFileReader.readAsDataURL(blob);

3.2、参数

  • blob
    即将被读取的 Blob 或 File 对象。

4、readAsText()

readAsText 方法可以将 Blob 或者 File 对象转根据特殊的编码格式转化为内容 (字符串形式)

这个方法是异步的，也就是说，只有当执行完成后才能够查看到结果，如果直接查看是无结果的，并返回 undefined

也就是说必须要挂载 实例下的 onload 或 onloadend 的方法处理转化后的结果

当转化完成后， readyState 这个参数就会转换 为 done 即完成态， event(“loadend”) 挂载的事件会被触发，并可以通过事件返回的形参得到中的 FileReader.result 属性得到转化后的结果

4.1、语法

instanceOfFileReader.readAsText(blob[, encoding]);

4.2、参数

  • blob
    Blob 类型 或 File 类型
  • encoding (可选)
    传入一个字符串类型的编码类型，如缺省，则默认为“utf-8”类型

五、事件

1、abort（中止事件）

在中止读取时会触发 abort 事件：例如程序调用 abort()。

2、error

当由于错误(例如，文件未找到或不可读)导致读取失败时，将触发error事件。

3、load

当文件成功读取时，执行load 事件

4、loadend

当文件读取完成(成功与否)时触发loadend事件。

5、loadstart

当文件读取操作开始时触发loadstart事件。

6、progress

当FileReader读取数据时，进度事件会定期触发。

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O??? 如果你觉得该文章有一点点用处，可以给作者点个赞