FileReader
FileReader 功能很简单: 从文件中读取数据和保存到JS变量中。此API特意设计成跟XMLHttpRequest 一样因为都是从外部读取数据。读取过程都是异步的不会造成浏览器阻塞。
FileReader 可以返回几种格式来文件数据的格式， 而且这些格式在读取文件时是必须的。通过以下几个方法可以宣告读取完毕：
readAsText()– 返回文件内容的纯文本格式readAsBinaryString()–返回文件内容的二进制格式 (不推荐– 推荐使用readAsArrayBuffer())readAsArrayBuffer()– 返回文件内容的ArrayBuffer格式(图片文件推荐使用)readAsDataURL()– 返回文件内容的 data URL格式
这些格式都应在文件读取操作前初始化好比 XHR 对象的 send()方法前要初始化一个 HTTP 请求一样。同样的，开始读取之前你还是要监听 load 事件。读取的结果从 event.target.result 获取。例如：
ar reader = new FileReader();
reader.onload = function(event) {
var contents = event.target.result;
console.log("File contents: " + contents);
};
reader.onerror = function(event) {
console.error("File could not be read! Code " + event.target.error.code);
};
reader.readAsText(file);
以上示例将文件以纯文本输出。文件读取成功则执行 onload 方法否则执行 onerror 方法。 FileReader 的实例可以直接从event.target中取到而且推荐这么取而不是直接用 reader 变量.。 result 属性包含有文件的内容， success 和 error 包含有成功与失败的信息。
读取 data URIs
读取 data URI 的步骤大致相同。Data URIs (有时称 data URLs) 有时是个不错的选择，比如，直接显示从硬盘上读到的图片 ，案例参考：
var reader = new FileReader();
reader.onload = function(event) {
var dataUri = event.target.result,
img = document.createElement("img");
img.src = dataUri;
document.body.appendChild(img);
};
reader.onerror = function(event) {
console.error("File could not be read! Code " + event.target.error.code);
};
reader.readAsDataURL(file);
以上示例将读取的图片插入页面当中。由于data URI 包含有整个图片的内容，可以直接赋值给一个Image对象的src属性然后显示。你还能将图片直接画到 <canvas> 元素里:
var reader = new FileReader();
reader.onload = function(event) {
var dataUri = event.target.result,
context = document.getElementById("mycanvas").getContext("2d"),
img = new Image();
// wait until the image has been fully processed
img.onload = function() {
context.drawImage(img, 100, 100);
};
img.src = dataUri;
};
reader.onerror = function(event) {
console.error("File could not be read! Code " + event.target.error.code);
};
reader.readAsDataURL(file);
以上示例将一个图片资源读入一个 Image 对象，然后将其画入一个canvas中（高宽各100）。
Data URIs 通常都这么用， 且可以用于任何类型的文件。最广泛的用法就是将文件一边读为data URI的同时一边在页面上即时显示。
读取 ArrayBuffers
ArrayBuffer 格式[1] 作为WebGL的一部分首次提出的。ArrayBuffer 表示将任意大小的字节数用一定的字节数来存储。此方式即是通过特定的视图来从 ArrayBuffer 读取数据，比如 Int8Array， 底层为 8 位有符号整型的集合，再如 Float32Array, 底层为32 位浮点数的集合。 这些谐称为类型化数组[2]，这样容易迫使你使用一定的字节数来存储而不是无限字节数（即传统的数组）。
你可能将一个 ArrayBuffer 主要用于处理二进制的文件， 以便更细粒度的操作数据。在这里讨论 ArrayBuffer 的方方面面完全超出了的本文的范围，只要知道将文件读成 ArrayBuffer格式是非常简单的即可。你可随时将 ArrayBuffer 通过 XHR 对象的 send() 方法到服务器端 (然后在后端将数据重建)，只要你的浏览器完整支持XMLHttpRequest Level 2[3] (各大浏览器的最新版都支持的包括IE10和Opera 12).
原文地址：http://www.iunbug.com/archives/2012/06/04/220.html