js FileReader类使用分析

话说今天只是粗略浏览了一下Proxy SwitchySharp的源码，就收获了不少东西，其中就包括本文要介绍的读取和保存文件。
因为Google还不提供同步插件数据的功能，所以导入和导出插件配置就必须和文件打交道了。而出于安全原因，只有IE才提供访问文件的API；但随着HTML 5的到来，其他浏览器也纷纷支持了。

首先说读取文件。W3C提供了一些File API，其中最重要的是FileReader这个类。

先列出需要用到的HTML标签：

<input type="file" id="file" onchange="handleFiles(this.files)"/>

 

当选择了一个文件时，就会把包含这个文件的列表（一个FileList对象）作为参数传给handleFiles()函数了。
这个FileList对象类似一个数组，可以知道文件的数目，而它的元素就是File对象了。
从这个File对象可以获取name、size、lastModifiedDate和type等属性。
把这个File对象传给FileReader对象的读取方法，就能读取文件了。

FileReader共有4种读取方法：

• readAsArrayBuffer(file)：将文件读取为ArrayBuffer。
• readAsBinaryString(file)：将文件读取为二进制字符串
• readAsDataURL(file)：将文件读取为Data URL
• readAsText(file, [encoding])：将文件读取为文本，encoding缺省值为’UTF-8′

此外，abort()方法可以停止读取文件。

FileReader对象在读取文件后，还需要进行处理。为了不阻塞当前线程，API采用了事件模型，可以注册这些事件：

• onabort：中断时触发
• onerror：出错时触发
• onload：文件成功读取完毕时触发
• onloadend：文件读取完毕时触发，无论是否失败
• onloadstart：文件开始读取时触发
• onprogress：当文件读取时，周期性地触发

 

有了这些方法以后，就可以处理文件了。
先来试试读取文本文件：

function handleFiles(files) {
    if (files.length) {
        var file = files[0];
        var reader = new FileReader();
        if (/text/w+/.test(file.type)) {
            reader.onload = function() {
                $('<pre>' + this.result + '</pre>').appendTo('body');
            }
            reader.readAsText(file);
        }
    }
}

这里的this.result实际上就是reader.result，也就是读取出来的文件内容。
测试一下你会发现这个文件的内容被添加到网页中了。如果是用Chrome的话，必须把网页放在服务器上或插件里，file协议下会失败。

再来试试图片，因为浏览器可以直接显示Data URI协议的图片，所以这次就添加图片：

function handleFiles(files) {
    if (files.length) {
        var file = files[0];
        var reader = new FileReader();
        if (/text/w+/.test(file.type)) {
            reader.onload = function() {
                $('<pre>' + this.result + '</pre>').appendTo('body');
            }
            reader.readAsText(file);
        } else if(/image/w+/.test(file.type)) {
            reader.onload = function() {
                $('<img src="' + this.result + '"/>').appendTo('body');
            }
            reader.readAsDataURL(file);
        }
    }
}

其实input:file控件还支持选择多个文件：

<input type="file" id="files" multiple="" onchange="handleFiles(this.files)"/>

这样handleFiles()里就需要遍历处理files了。

如果只想读取部分数据的话，File对象还有webkitSlice()或mozSlice()方法，用于生成Blob对象。这个对象可以和File对象一样被FileReader读取。这2个方法接收3个参数：第1个参数是起始位置；第2个是结束位置，省略时则读到文件结尾；第3个是content type。
例子可以参考《Reading local files in JavaScript》。

当然，除了导入数据和显示文件以外，它还可以用来做AJAX上传，代码可以参考《Using files from web applications》。

接下来说保存文件。
实际上File API: Writer提供了4个接口，但目前只有部分浏览器（Chrome 8+和Firefox 4+）实现了BlobBuilder，其余接口都不可用。
对于不支持的浏览器，可以使用BlobBuilder.js和FileSaver.js来获得支持。
我研究了一下，发现了其中的奥秘。

BlobBuilder可以创建一个Blob对象。把这个Blob对象传递给URL.createObjectURL()方法，就可以拿到一个object URL。而这个object URL就是这个Blob对象的下载地址。
拿到下载地址后，创建一个a元素，将下载地址赋值给href属性，文件名赋值给download属性（Chrome 14+支持）。
然后再创建一个click事件，交给这个a元素处理，就会导致浏览器开始下载这个Blob对象了。
最后，用URL.revokeObjectURL()来释放这个object URL，通知浏览器可以不必继续引用这个文件了。

下面就是一段化简的代码：

var BlobBuilder = BlobBuilder || WebKitBlobBuilder || MozBlobBuilder;
var URL = URL || webkitURL || window;

function saveAs(blob, filename) {
    var type = blob.type;
    var force_saveable_type = 'application/octet-stream';
    if (type && type != force_saveable_type) { // 强制下载，而非在浏览器中打开
        var slice = blob.slice || blob.webkitSlice || blob.mozSlice;
        blob = slice.call(blob, 0, blob.size, force_saveable_type);
    }

    var url = URL.createObjectURL(blob);
    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = url;
    save_link.download = filename;

    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    save_link.dispatchEvent(event);
    URL.revokeObjectURL(url);
}

var bb = new BlobBuilder;
bb.append('Hello, world!');
saveAs(bb.getBlob('text/plain;charset=utf-8'), 'hello world.txt');

测试时会提示保存一个文本文件。Chrome需要把网页放在服务器上或插件里。

 

————-华丽的分割线—————————————

 

HTML5定义了FileReader作为文件API的重要成员用于读取文件，根据W3C的定义，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。

FileReader的使用方式非常简单，可以按照如下步骤创建FileReader对象并调用其方法：

1.检测浏览器对FileReader的支持

 

2. 调用FileReader对象的方法

FileReader 的实例拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能，需要注意的是 ，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中。

方法名	参数	描述
abort	none	中断读取
readAsBinaryString	file	将文件读取为二进制码
readAsDataURL	file	将文件读取为 DataURL
readAsText	file, [encoding]	将文件读取为文本

readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。

 

3. 处理事件

FileReader 包含了一套完整的事件模型，用于捕获读取文件时的状态，下面这个表格归纳了这些事件。

事件	描述
onabort	中断时触发
onerror	出错时触发
onload	文件读取成功完成时触发
onloadend	读取完成触发，无论成功或失败
onloadstart	读取开始时触发
onprogress	读取中

文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null ，否则即是读取的结果，绝大多数的程序都会在成功读取文件的时候，抓取这个值。

下面通过一个上传图片预览和带进度条上传来展示FileReader的使用。

 

如果要限定上传文件的类型，可以通过文件选择器获取文件对象并通过type属性来检查文件类型

不难发现这个检测是基于正则表达式的，因此可以进行各种复杂的匹配，非常有用。

如果要增加一个进度条，可以使用HTML 5的progress标签，通过下面的代码实现。