FileReader简介

一、属性(以下属性均为只读)

属性

介绍

error

在读取文件时发生的错误

readyState

FileReader对象当前的状态,

有三个: 0,1,2,

分别对应的常量名为EMPTY、LOADING、DONE,

分别表示数据还没有开始读取,正在读取,读取成功

result

读取完成之后的内容

只有在读取完成之后有效

格式由用哪个函数读取决定

例如: 用readAsBinaryString函数,读取完之后就是二进制字符串,

具体参见方法

 


 

二、方法

方法

描述

参数

abort()

中止读取操作


readAsArrayBufffer()

读取File或Blob对象,并将读取完成的内容放在result属性中,readState

置为2,如果定义了事件处理函数onloadend,会在执行完之后调用。

这四个函数的不同处就在于在result中生成的内容格式不一样。

readAsArrayBufffer执行完之后会在result属性中生成一个ArrayBuffer格式的内容;

readAsBinaryString生成的是所读取文件的原始二进制数据;

readAsDataUrl将包含一个data:URL格式的字符串以表示所读取文件的内容;

readAsText是一个字符串的读取结果。

将要读取的File或Blob对象

readAsBinaryString()

同上

readAsDataURL()

同上

readAsText()

arguments[0]:将要读取的File或Blob对象

arguments[1]: 可选一个字符串,表示了返回数据所使用的编码.如果不指定,默认为UTF-8.

 

 

DataURL是一种格式,用base64将内容加密,然后将加密后的内容放在URL中,一般格式小的图片,字体图标或者其他体积小的文件可以用这种格式展现,可以http减少请求次数。

三、事件处理函数

方法

描述

事件对象

onabort

当读取操作被中止时调用

事件对象中有是否冒泡,

事件类型

已读取量

读取总量等属性,

可自行打印查看

onerror

当读取操作发生错误时调用

onload

当读取操作完成且成功时调用

onloadend

当读取操作完成时调用,不管是成功还是失败.该处理程序在onload或者onerror之后调用

onloadstart

当读取操作将要开始之前调用

onprogress

在读取数据过程中周期性调用(例如设置加载进度条时会使用)

 

 

四、浏览器兼容

谷歌  7 

IE 10

火狐 3.6

欧朋和苹果未实现

五、应用场景

按指定格式读取本地文件到脚本对象中,然后进行文件上传前的展示,判断

我是什么时候用到的呢,就是在图片上传之前要将需要上传的图片展示给用户,并需要判断图片宽高分别是多少像素等

这时候就要new一个FileReader对象,然后将inputElement.files[0]传入readAsDataURL方法,获取地址,将FileReader对象的result属性给指定Image对象的src,就可以在本地显示图片了

这时候获取图片宽高的话应该不是图片原始的值,要想解决这个问题还需要new一个image对象,然后将FileReader对象的result属性赋值给这个new出来的对象的src属性,再获取image对象的 naturalWidth,naturalHeight就可以了

六、参考链接

https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader