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 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