Html5 本地文件读取 API 研究使用过程中的意外发现 - MDN
太阳火神的美丽人生 (http://blog.csdn.net/opengl_es)
本文遵循“署名-非商业用途-保持一致”创作公用协议
补充：
终于可以读出肉的眼能看懂的人类文字了！！！
经在 safari 7.0.4(9537.76.4) 测试，即使关闭 WebGL 支持，File API 仍可正常读取本地文本文件内容。
下面 FileReader 的文档估计时间会稍微久远一些，不过按其描述，确实准确解读了火星语，我们地球人终于全都知道了。
接下来，语言通了，知道说的是啥了，开始贸易吧，还得继续遵循贸易规则，更得尊重当地的风俗习惯，来特俺们够！
说是原创，实际是资料搜集过程中的一个记录，从这个角度也算是原创吧！
至于内容，那可是 MDN 的原创，俺这里只能算借花献佛，非俺原创，本想翻译，后发现俺中意的内容有中文版，这也说明 MDN 对中国开发者的重视，不过也可能是我们中国开发者做的贡献，这个确实不清楚。
来个干脆的，把关注的整个页面全捞过来，也算做一个资源目录吧，详细的部分，真的太多了。
不过我想研究的是 FileReader 的文件加载过程及响应事件，异步处理嘛，肯定要有个开始与结束，面向对象的 JS ，俺确实不太熟，但用面向对象的思想来圈一圈它，还是跑不出范围的，所以，知道加速度的变化，对速度的把控，那确实是淋漓尽致！
至于俺要研究的部分，那可是本篇的核心内容，从此处算是比较权威的来源证实，Opera、Safari 还不支持这些个 API，不知这是否会成为本次研究的一个终结，还是别乱猜了，稍侯请示一下，会有结果，这个不必费心，有些时侯有些事情，确实不是我们能做得了主的，那么尽量全面的了解情况，分析整理后，提供多套可行方案和处理思路，呈报上去，自会有需要我们做的下一步工作，而至于如何选，怎么选，这个我们提供分析结果就可以了，至于最终结论，只要遵照行事即可，毕竟我们站的高度还看不到那些我们看不到的事情：
FileReader
使用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.
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 );
参数
readAsDataURL()
开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.
void readAsDataURL( in Blob blob );
参数
例子
这个方法很有用,比如,可以实现图片的本地预览(在线演示):
<!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>readAsText()
开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个字符串以表示所读取的文件内容.
void readAsText(
in Blob blob,
in DOMString encoding 可选
);
参数
事件处理程序
onabort- 当读取操作被终止时调用.
onerror- 当读取操作发生错误时调用.
onload- 当读取操作成功完成时调用.
onloadend- 当读取操作完成时调用,不管是成功还是失败.该处理程序在
onload或者onerror之后调用. onloadstart- 当读取操作将要开始之前调用.
onprogress- 在读取数据过程中周期性调用.
浏览器兼容性
| 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 开发人员文档 ，应该从下往上看才是由浅入深；
开放的Web为开发者提供难以置信的机会。为了充分利用这些技术，你需要知道怎么使用它们。您在下面可以找到与我们相关的Web技术文档的链接。
Web 开发人员文档
- Web 开发人员参考
- 所参考的 Web 开发文档包括HTML，CSS等。
- Web 开发者指南
- 网络开发指南提供了有用的内容，以帮助你实际地来使用网络技术做那些你想去做或者需要你去做的事情。
- Web 开发者入门
- A list of tutorials to take you step-by-step through learning APIs, technologies, or broad topic areas.
- 开发Web应用
- Documentation for Web application developers; Web apps are true write-once, deploy anywhere apps for mobile, desktop, and Firefox OS.
Web技术参考
- Web APIs
- Reference material for each of the interfaces that comprise the Web‘s APIs, including the DOM and all of the related APIs and interfaces you can use to build Web content and apps.
- HTML
- HyperText Markup Language is the language used to describe and define the content of a Web page.
- CSS
- Cascading Style Sheets are used to describe the appearance of Web content.
- SVG
- Scalable Vector Graphics let you describe images as sets of vectors and shapes in order to allow them to scale smoothly regardless of the size at which they‘re drawn.
- MathML
- The Mathematical Markup Language makes it possible to display complex mathematical equations and syntax.
Temporary
The stuff below here is temporary to help keep track of things while organization work is ongoing. Pay it no mind.