FileReader API 文件操作

File API 文件操作

FileReader：

使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要处理的文件或数据.其中File对象可以是来自用户在一个元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后的返回结果。

FileReader API 的工作原理和 File API 一样，需要使用input[type="file"] 元素：

<-- 一个能上传多媒体文件的表单 -->

<input type="file" id="upload-file" multiple />

<-- 显示图片的地方 -->

<div id="destination"></div>

安全方式从用户（远程）系统中读取文件内容。它不能用于简单地从文件系统中按路径。

    重要说明：FileReader仅用于以名读取文件。要在JavaScript中按路径名读取文件，应使用标准的Ajax解决方案来进行服务器端文件读取，如果读取跨域，则应具有CORS权限。

FileReader.error 只读

一个DOMException代表在读取文件中出现的错误。

FileReader.readyState 只读

一个数字，指示的状态FileReader。这是以下之一：

EMPTY	0	尚未加载任何数据。
LOADING	1	当前正在加载数据。
DONE	2	整个读取请求已完成。

FileReader.result 只读

文件的内容。此属性仅在读取操作完成后才有效，并且数据的格式取决于用于启动读取操作的方法。

事件处理程序

FileReader.onabort

abort事件的处理程序。每次中止读取操作都会触发此事件。

FileReader.onerror

error事件的处理程序。每当读取操作遇到错误时，都会触发此事件。

FileReader.onload

load事件的处理程序。每当读取操作成功完成时，都会触发此事件。

FileReader.onloadstart

loadstart事件的处理程序。每次开始读取时都会触发此事件。

FileReader.onloadend

loadend事件的处理程序。每次读取操作完成（成功或失败）都会触发此事件。

FileReader.onprogress

progress事件的处理程序。读取Blob内容时触发此事件。

由于FileReader继承自EventTarget，所有这些事件也可以使用addEventListener方法侦听。

方法

FileReader.abort()

中止读取操作。返回时，readyState将为DONE。

FileReader.readAsArrayBuffer()

开始读取指定的内容Blob，完成后，该result属性包含一个ArrayBuffer表示文件数据的属性。

FileReader.readAsBinaryString()

开始读取指定的内容Blob，完成后，该result属性包含来自文件的原始二进制数据作为字符串。

FileReader.readAsDataURL()

开始读取指定的内容Blob，完成后，该result属性包含一个data:表示文件数据的URL。

FileReader.readAsText()

开始读取指定内容Blob，完成后，result属性包含文件内容的文本字符串。可以指定一个可选的编码名称。

大事记

使用addEventListener()或通过将事件侦听器分配给此接口的oneventname属性来侦听这些事件。

abort

当读取中止（例如，由于程序调用）时触发FileReader.abort()。

也可通过onabort属性获得。

error

当读取由于错误而失败时触发。

也可通过onerror属性获得。

load

读取成功完成时触发。

也可通过onload属性获得。

loadend

读取成功或失败时触发。

也可通过onloadend属性获得。

loadstart

读取开始时触发。

也可通过onloadstart属性获得。

progress

读取数据时定期触发。

也可通过onprogress属性获得。

浏览器兼容：

FileReader - Web APIs | MDN