使用 JavaScript File API 实现文件上传
?
可以看到，我们用普通的 <form> 标签来包含一个传统的 <input type=”file” … /> 元素。在 <form> 中还有一个 submit 元素。在 <form> 之外有一些 <span> 元素用来表示已读取和总共的数据量。<form> 的 action 属性指向了一个 JavaScript 函数 uploadAndSubmit()。这个函数完成了读取文件并上传的过程。函数代码见清单 2。
清单 2 读取文件并上传的 JavaScript 函数
?
在这个函数中，首先我们找到含有 <input type=”file” … /> 元素的 <form>，并找到含有上传文件信息的 <input> 元素。如 <input> 元素中不含有文件，说明用户没有选择任何文件，此时将报错。
清单 3 找到 <input> 元素
?
按照 File API 的规范，我们也可以将事件 onloadend 的处理拆分为事件 error 以及事件 load 的处理。
在这个示例中，我们后台使用一个 JSP 来处理上传。JSP 代码如清单 7。
清单 7 处理上传的 JSP 代码
?
//接收文件上传并保存到
?
在这段 JSP 代码中，我们从 POST 请求中接受文件名字以及二进制数据。将二进制数据写入到服务器的“D:\”路径中。并返回文件的完整路径。以上代码可以在最新的 Firefox 3.6 中调试通过。
图 4 上传文件的效果图
小结
本文通过对 File API 规范的讲解，以及两个展示其使用方法的例子，为大家提前揭示了作为未来 HTML5 重要组成部分的 JavaScript File API 的全貌。利用它，结合其他 HTML5 的新特性，比如 Drag&Drop，我们可以利用纯 JavaScript 方案，为用户提供更好使用体验的 Web 应用，与此同时，这样的一致化方案也使我们避免了以往跨浏览器支持所花费的巨大代价。相信 File API 的出现和广泛应用，将会是未来的 Web 2.0 应用的大势所趋。
