MDN之Web API 接口参考(三)【FileReader】 短命女 2021-06-26 16:06 408阅读 0赞 `FileReader` 对象允许`Web`应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 `File` 或 `Blob` 对象指定要读取的文件或数据。 其中`File`对象可以是来自用户在一个`<input>`元素上选择文件后返回的`FileList`对象,也可以来自拖放操作生成的 `DataTransfer`对象,还可以是来自在一个`HTMLCanvasElement`上执行`mozGetAsFile()`方法后返回结果。 > Note: 此特性在 `Web Worker` 中可用。 ## 构造函数 ## FileReader() 返回一个新构造的`FileReader`。 有关详细信息和示例,请参阅如何在web应用程序中使用文件。 ## 属性 ## FileReader.error 只读 一个`DOMException`,表示在读取文件时发生的错误 。 FileReader.readyState 只读 表示`FileReader`状态的数字。取值如下: <table> <thead> <tr> <th align="left">常量名</th> <th align="left">值</th> <th align="left">描述</th> </tr> </thead> <tbody> <tr> <td align="left">EMPTY</td> <td align="left">0</td> <td align="left">还没有加载任何数据.</td> </tr> <tr> <td align="left">LOADING</td> <td align="left">1</td> <td align="left">数据正在被加载.</td> </tr> <tr> <td align="left">DONE</td> <td align="left">2</td> <td align="left">已完成全部的读取请求.</td> </tr> </tbody> </table> 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`属性中将包含一个字符串以表示所读取的文件内容。
还没有评论,来说两句吧...