HTML5 FileReader详解与实例---读取并显示图像文件

我们曾经在《HTML5 中 File 对象初探》中，使用到了FileReader，在那篇文章中，它被用来将一个文件读取为二进制字符串，并通过 xhr 发送到后端形成交互。作为 File API 的一部分，FileReader 专门用于读取文件，根据 W3C 的定义，FileReader 接口 "提供一些读取文件的方法与一个包含读取结果的事件模型"。

接下来，我们将逐一了解 FileReader 的方法与事件模型，并最终通过一个例子程序来应用 FireRead，在这个例子中，使用支持 FileReader 浏览器的用户将能够通过一个 file input 选择一个图像文件，并不经过后台将图像显示在页面中。下面的链接指向这个例子，值得注意的是，到目前为止，只有 Firefox 3.6+ 和 Chrome 6.0+ 实现了 FileReader 接口。

点此查看最终效果

在这之前的 web 应用程序中，实现这个效果的通常做法是将用户选择的图像文件传送至后端，后端对其进行存储，再将 URL 返回到前端，前端通过这个 URL 来显示图像。 FileReader 的突破在于使得 JavaScript 拥有了处理文件的能力，它可以异步地读取存储在用户电脑中的文件，这里所指的文件，对于 JavaScript 来说是一个 File 对象，FileReader 读取文件的全部方法皆依赖于此，对于 File 对象还不是很了解的话，请先阅读《HTML5 中 File 对象初探》，这是本文的基础。

1. 能力检测与创建实例

检测一个浏览器是否支持 FileReader 很容易做到，支持这一接口的浏览器有一个位于 window 对象下的 FileReader 构造函数，如果浏览器有这个构造函数，那么就可以 new 一个 FileReader 的实例来使用。

        if ( typeof FileReader === 'undefined' ) {        alert( " 您的浏览器未实现 FileReader 接口 " );} else {                var reader = new FileReader();        // do sth.}

2. 方法

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

方法名参数描述abortnone中断读取readAsBinaryStringfile将文件读取为二进制码readAsDataURLfile将文件读取为 DataURLreadAsTextfile, [encoding]将文件读取为文本

readAsText： 该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
readAsBinaryString： 这个方法在《HTML5 中 File 对象初探》中已经被使用过一次了，它将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
readAsDataURL： 这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URI，Data URI是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。点击这里了解更多关于 Data URI 的知识。

3. 事件

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

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

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

reader.onload = function () {this.result     // 读取结果}

4. 实例

了解了这些知识过后，我们来还原之前的示例。第一步，创建 html 部分，主要包括一个 input 和一个用来呈现结果的 div：

    <p>        <label>请选择一个图像文件：</label>        <input type="file" id="demo_input" />    </p>     <div id="demo_result">          <!-- 这里用来显示读取结果 -->    </div> 

接下来获取节点，并处理浏览器兼容部分，对于未实现 FileReader 接口的浏览器将给出一个提示并禁用 input，否则监听 input 的 change 事件。

if ( typeof FileReader === 'undefined' ){        result.innerHTML = "<p class='warn'>抱歉，你的浏览器不支持 FileReader</p>";        input.setAttribute( 'disabled','disabled' );} else {        input.addEventListener( 'change',readFile,false );}

最后书写函数 readFile 的代码，当 file input 的 change 事件触发时，调用这个函数，首先获取到 file 对象，并通过 file 的 type 属性来检验文件类型，在这里，我们只允许选择图像类型的文件。然后创建一个 FileReader 实例，并且调用 readAsDataURL 方法读取文件，在实例的 load 事件中，获取到成功读取到的文件内容，并以插入一个 img 节点的方式，显示在页面中。

function readFile(){        var file = this.files[0];        if(!/image\/\w+/.test(file.type)){                alert("请确保文件为图像类型");                return false;        }        var reader = new FileReader();        reader.readAsDataURL(file);        reader.onload = function(e){                result.innerHTML = '<img src="'+this.result+'" alt=""/>'        }}

参考资料：
W3C File API --- FileReader Interface
MDC --- FileReader