文章の目录

一、概述
二、构造函数
- 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???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！

JavaScript系列之FileReader相关推荐

深入理解JavaScript系列（33）：设计模式之策略模式（转）
介绍策略模式定义了算法家族,分别封装起来,让他们之间可以互相替换,此模式让算法的变化不会影响到使用算法的客户. 正文在理解策略模式之前,我们先来一个例子,一般情况下,如果我们要做数据合法性验证,很 ...
javascript系列之DOM(三)---事件
javascript系列之DOM(三)---事件原文:javascript系列之DOM(三)---事件事件是javascript跳动的心脏,是DOM所有成分结合的万金油.当我们在WEB 上进行某些 ...
深入理解JavaScript系列（4）：立即调用的函数表达式
前言大家学JavaScript的时候,经常遇到自执行匿名函数的代码,今天我们主要就来想想说一下自执行. 在详细了解这个之前,我们来谈了解一下"自执行"这个叫法,本文对这个功能的叫 ...
tom大叔blog--------深入理解javascript系列-----------笔记
之前一直收藏着tom大叔的blog,只是自己懒了下下...每个blog都像一个秘籍,每次看都有收获,也许自己道行太浅吧..不过还是很高兴,记下..也为了督促自己坚持下去... 一.深入理解JavaSc ...
深入理解JavaScript系列（5）：强大的原型和原型链
前言 JavaScript 不包含传统的类继承模型,而是使用 prototypal 原型模型. 虽然这经常被当作是 JavaScript 的缺点被提及,其实基于原型的继承模型比传统的类继承还要强大.实 ...
深入理解JavaScript系列（1）：编写高质量JavaScript代码的基本要点
才华横溢的Stoyan Stefanov,在他写的由O'Reilly初版的新书<JavaScript Patterns>(JavaScript模式)中,我想要是为我们的读者贡献其摘要,那会 ...
深入理解JavaScript系列（27）：设计模式之建造者模式
介绍在软件系统中,有时候面临着"一个复杂对象"的创建工作,其通常由各个部分的子对象用一定的算法构成:由于需求的变化,这个复杂对象的各个部分经常面临着剧烈的变化,但是将它们组合在一 ...
深入理解JavaScript系列（33）：设计模式之策略模式
介绍策略模式定义了算法家族,分别封装起来,让他们之间可以互相替换,此模式让算法的变化不会影响到使用算法的客户. 正文在理解策略模式之前,我们先来一个例子,一般情况下,如果我们要做数据合法性验证,很 ...
深入理解JavaScript系列（32）：设计模式之观察者模式
介绍观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们 ...

JavaScript系列之FileReader

文章の目录

一、概述

二、构造函数

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

写在最后

JavaScript系列之FileReader相关推荐

最新文章

热门文章