概述
以往对于基于浏览器的应用而言，访问本地文件都是一件头疼的事情。虽然伴随着 Web 2.0 应用技术的不断发展，JavaScript 正在扮演越来越重要的角色，但是出于安全性的考虑，JavaScript 一直是无法访问本地文件的。于是，为了在浏览器中能够实现诸如拖拽并上传本地文件这样的功能，我们就不得不求助于特定浏览器所提供的各种技术了。比如对于 IE，我们需要通过 ActiveX 控件来获取对本地文件的访问能力，而对于 Firefox，同样也要借助插件开发。由于不同浏览器的技术实现不尽相同，为了让程序能够支持多浏览器，我们的程序就会变得十分复杂而难于维护。不过现在，这一切都因为 File API 的出现而得到了彻底的改变。
File API 是 Mozilla 向 W3C 提交的一个草案，旨在推出一套标准的 JavaScript API，其基本功能是实现用 JavaScript 对本地文件进行操作。出于安全性的考虑，该 API 只对本地文件提供有限的访问。有了它，我们就可以很轻松的用纯 JavaScript 来实现本地文件的读取和上传了。目前，FireFox 3.6 是最先支持这一功能的浏览器。除此以外，最新版本的 Google Chrome 浏览器和 Safari 浏览器也有相应的支持。File API 有望成为 W3C 目前正在制定的未来 HTML 5 规范当中的一部分。
本文后续章节将对 File API 做一个基本的介绍。并为读者演示：如何利用 File API 实现基于 file input 控件的本地文件读取与上传；以及利用拖拽实现从用户系统批量上传文件的功能。通过本文，读者可以了解最新的 File API 的概况以及使用，从而为构建具有更好用户体验的 Web 2.0 应用提供参考。
回页首
File API 概览
File API 由一组 JavaScript 对象以及事件构成。赋予开发人员操作在 <input type=”file” … /> 文件选择控件中选定文件的能力。图 1 展示了 File API 所有的 JavaScript 的组合关系。
图 1. File API 相关类图
?
类型 FileList 包含一组 File 对象。通常 FileList 对象可以从表单中的文件域（<input type=”file” .../>）中拿取。Blob 对象代表浏览器所能读取的一组原始二进制流。Blob 对象中，属性 size 表示流的大小。函数 slice() 可以将一个长的 Blob 对象分割成小块。File 对象继承自 Blob 对象，在 Blob 对象基础上增加了和 File 相关的属性。其中，属性 name 表示文件的名字，这个名字去掉了文件的路径信息，而只保留了文件名。属性 type 表示文件的 MIME 类型。属性 urn 则代表这个文件的 URN 信息。为完成文件读取的操作，一个 FileReader 对象实例会关联 File 或 Blob 对象，并提供三种不同的文件读取函数以及 6 种事件。参见表 1 及表 2。
表 1. 文件读取函数
| readAsBinaryString() | 读取文件内容，读取结果为一个 binary string。文件每一个 byte 会被表示为一个 [0..255] 区间内的整数。函数接受一个 File 对象作为参数。 |
| readAsText() | 读取文件内容，读取结果为一串代表文件内容的文本。函数接受一个 File 对象以及文本编码名称作为参数。 |
| readAsDataURL | 读取文件内容，读取结果为一个 data: 的 URL。DataURL 由 RFC2397 定义，具体可以参考 http://www.ietf.org/rfc/rfc2397.txt。 |
表 2. 文件读取事件
