[转]JavaScript文件操作(2)-FileReader

在上篇文章中,我介绍了在JavaScript操作文件，重点讲了如何取得File对象。 这些对象包含的文件的元数据在上传或者拖放到浏览器中时可以获取到。有了文件当然接下来就是读取文件了。

FileReader

FileReader

功能很简单: 从文件中读取数据和保存到JS变量中。此API特意设计成跟

XMLHttpRequest

一样因为都是从外部读取数据。读取过程都是异步的不会造成浏览器阻塞。

FileReader

可以返回几种格式来文件数据的格式， 而且这些格式在读取文件时是必须的。通过以下几个方法可以宣告读取完毕：

readAsText()

– 返回文件内容的纯文本格式

readAsBinaryString()

–返回文件内容的二进制格式 (不推荐– 推荐使用

readAsArrayBuffer()

)

readAsArrayBuffer()

– 返回文件内容的

ArrayBuffer

格式(图片文件推荐使用)

readAsDataURL()

– 返回文件内容的 data URL格式

这些格式都应在文件读取操作前初始化好比 XHR 对象的

send()方法前要初始化一个

HTTP 请求一样。同样的，开始读取之前你还是要监听

load

事件。读取的结果从

event.target.result 获取。例如：

以上示例将文件以纯文本输出。文件读取成功则执行

onload 方法否则执行

onerror

方法。

FileReader

的实例可以直接从

event.target中取到而且推荐这么取而不是直接

用

reader

变量.。

result

属性包含有文件的内容， success 和

error

包含有成功与失败的信息。

读取 data URIs

读取 data URI 的步骤大致相同。Data URIs (有时称 data URLs) 有时是个不错的选择，比如，直接显示从硬盘上读到的图片 ，案例参考：

以上示例将读取的图片插入页面当中。由于data URI 包含有整个图片的内容，可以直接赋值给一个Image对象的src属性然后显示。你还能将图片直接画到

<canvas>

元素里:

以上示例将一个图片资源读入一个

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).

下期预告

通过FileReader

从文件中读取数据非常简单。如果你会用

XMLHttpRequest那么很容易学会从文件中读取数据。下期你将会学到更多

FileReader

相关事件和理解常见错误。

参考资料

ArrayBuffer

Typed Array Specification

XMLHttpRequest Level 2

原文：
http://www.iunbug.com/archives/2012/06/04/220.html
可参考：
http://blog.csdn.net/zk437092645/article/details/8745647