[web] 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 获取。例如：

var 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);

Data URIs 通常都这么用， 且可以用于任何类型的文件。最广泛的用法就是将文件一边读为data URI的同时一边在页面上即时显示。以上示例将一个图片资源读入一个 Image 对象，然后将其画入一个canvas中（高宽各100）。

读取 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 相关事件和理解常见错误。

参考资料

1. ArrayBuffer
2. Typed Array Specification
3. XMLHttpRequest Level 2
4. http://www.iunbug.com/archives/2012/06/04/220.html

Disclaimer: Any viewpoints and opinions expressed in this article are those of Nicholas C. Zakas and do not, in any way, reflect those of my employer, my colleagues, Wrox Publishing, O’Reilly Publishing, or anyone else. I speak only for myself, not for them.

原文