使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要读取的文件或数据.其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自由拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后的返回结果.
想要创建一个FileReader对象,很简单,如下:
var reader = new FileReader();
如何在web应用程序中使用文件一文中有更详细的解释和例子.
方法概述
void abort(); |
void readAsArrayBuffer(in Blob blob); |
void readAsBinaryString(in Blob blob); |
void readAsDataURL(in Blob blob); |
void readAsText(in Blob blob, [optional] in DOMString encoding); |
状态常量
| 常量名 | 值 | 描述 |
EMPTY |
0 |
还没有加载任何数据. |
LOADING |
1 |
数据正在被加载. |
DONE |
2 |
已完成全部的读取请求. |
属性
| 属性名 | 类型 | 描述 |
error |
DOMError |
在读取文件时发生的错误. 只读. |
readyState |
unsigned short |
表明FileReader对象的当前状态. 值为State constants中的一个. 只读 |
result |
读取到的文件内容.这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的. 只读. |
方法
abort()
中止该读取操作.在返回时,readyState属性的值为DONE.
void abort();
参数
无.
抛出的异常
-
DOM_FILE_ABORT_ERR -
当该FileReader对象没有在进行读取操作时(也就是readyState属性的值不为
LOADING时),调用abort()方法会抛出该异常.Note: 实现于Gecko 6.0.
Requires Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4)
readAsArrayBuffer()
开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个ArrayBuffer对象以表示所读取文件的内容.
void readAsArrayBuffer( in Blob blob );
参数
-
blob -
将要读取到一个
ArrayBuffer中的Blob对象或者File对象.
readAsBinaryString()
开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含所读取文件的原始二进制数据.
void readAsBinaryString( in Blob blob );
参数
-
blob -
将要读取的
Blob对象或者File对象.
readAsDataURL()
开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.
void readAsDataURL( in Blob blob );
参数
-
file -
将要读取的
Blob对象或者File对象.
例子
这个方法很有用,比如,可以实现图片的本地预览(在线演示):
<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Image preview example</title>
<script type="text/javascript"> oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i; oFReader.onload = function (oFREvent) { document.getElementById("uploadPreview").src = oFREvent.target.result; }; function loadImageFile() { if (document.getElementById("uploadImage").files.length === 0) { return; } var oFile = document.getElementById("uploadImage").files[0]; if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; } oFReader.readAsDataURL(oFile); } </script>
</head>
<body onload="loadImageFile();">
<form name="uploadForm">
<table>
<tbody>
<tr>
<td><img id="uploadPreview" style="width: 100px; height: 100px;" src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%3F%3E%0A%3Csvg%20width%3D%22153%22%20height%3D%22153%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%3Cg%3E%0A%20%20%3Ctitle%3ENo%20image%3C/title%3E%0A%20%20%3Crect%20id%3D%22externRect%22%20height%3D%22150%22%20width%3D%22150%22%20y%3D%221.5%22%20x%3D%221.500024%22%20stroke-width%3D%223%22%20stroke%3D%22%23666666%22%20fill%3D%22%23e1e1e1%22/%3E%0A%20%20%3Ctext%20transform%3D%22matrix%286.66667%2C%200%2C%200%2C%206.66667%2C%20-960.5%2C%20-1099.33%29%22%20xml%3Aspace%3D%22preserve%22%20text-anchor%3D%22middle%22%20font-family%3D%22Fantasy%22%20font-size%3D%2214%22%20id%3D%22questionMark%22%20y%3D%22181.249569%22%20x%3D%22155.549819%22%20stroke-width%3D%220%22%20stroke%3D%22%23666666%22%20fill%3D%22%23000000%22%3E%3F%3C/text%3E%0A%20%3C/g%3E%0A%3C/svg%3E" alt="Image preview" /></td>
<td><input id="uploadImage" type="file" name="myPhoto" onchange="loadImageFile();" /></td>
</tr>
</tbody>
</table>
<p><input type="submit" value="Send" /></p>
</form>
</body>
</html>
注: IE10以下的版本不支持
FileReader()构造函数.不过可以利用滤镜来兼容旧版本的IE: 兼容IE的图片本地预览.
readAsText()
开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个字符串以表示所读取的文件内容.
void readAsText(
in Blob blob,
in DOMString encoding 可选
);
参数
-
blob -
将要读取的
Blob对象或者File对象. -
encoding可选 - 一个字符串,表示了返回数据所使用的编码.如果不指定,默认为UTF-8.
事件处理程序
-
onabort - 当读取操作被终止时调用.
-
onerror - 当读取操作发生错误时调用.
-
onload - 当读取操作成功完成时调用.
-
onloadend -
当读取操作完成时调用,不管是成功还是失败.该处理程序在
onload或者onerror之后调用. -
onloadstart - 当读取操作将要开始之前调用.
-
onprogress - 在读取数据过程中周期性调用.
浏览器兼容性
- Desktop
- Mobile
| Feature | Firefox (Gecko) | Chrome | Internet Explorer* | Opera* | Safari |
|---|---|---|---|---|---|
| Basic support | 3.6 (1.9.2) | 7 | 10 | Not supported | Not supported |
*IE9有一个File API Lab.Opera从11.10开始部分支持该API.
针对Gecko的注意事项
- 在Gecko 2.0 beta 7 (Firefox 4.0 beta 7)之前,上述方法中所有的Blob参数都只能是一个
File对象;根据最新的FileAPI草案,现在的所有的Blob参数既可以是Blob对象也可以是一个File对象. - 在Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10)之前,
FileReader.error属性会返回一个FileError对象.根据最新的FileAPI草案,现在的FileReader.error会返回一个DOMError对象.
相关链接
- 如何在web应用程序中使用文件
File- Specification: File API: FileReaderWD
附件
| 文件 | 大小 | 日期 | 附加者为 |
|---|---|---|---|
| image_upload_preview.html | 2235 字节 | 2012-05-08 17:16:34 | fusionchess |
| crossbrowser_image_preview.html | 2021 字节 | 2012-05-08 20:50:14 | fusionchess |
| Podcasts example screenshot | 19864 字节 | 2013-09-27 06:42:04 | chrisdavidmills |
文档标签和贡献者
对本页有贡献的人： ziyunfei
最后编辑者: ziyunfei, May 16, 2014 2:28:50 AM