Pure JS (3.1)：下传上载（利用 HTML5 与 Flash）

Pure JS (3.1)：上传下载（利用 HTML5 与 Flash）
Pure JS (3.1)：上传下载（利用 HTML5 与 Flash）
　　本文主要探讨 JavaScript 文件上传与下载，包括 客户端JS 和 服务器端JS 。
　　客户端支持 HTML5，Flash 和传统（隐藏）表单上传。
　　服务器端兼容 HTML5 Streaming 方式上传和 Multipart 方式上传，上传与下载都利用了 JAVA 7 NIO 中的 Files.copy(...) 函数。

　　其实上传与下载本身并不难，麻烦的是一些细节，比如客户端检查文件大小（怎么绕过浏览器的安全限制？），以及下载文件时中文文件名的乱码问题等。

运行效果
　　三种上传方式外观相似，如下图所示：


　　直接在前两篇文章中使用的 index.html 中增加了上传按钮。点击上传按钮弹出文件选择框（HTML 或 Flash 方式支持文件多选），选择完成后立即开始上传。上传过程中显示上传进度，期间可以取消；完成后添加到下方的完成列表中，可以移除已经上传完成的文件。
　　HTML5 和 表单上传的样式通过 CSS 样式进行设置，Flash 按钮需要加载一张图片（如附件中的 pure.button.png），可以在创建组件的参数中设置样式。

　　同时，对于支持 HTML5 的浏览器，还支持拖拽文件进行上传。
　　拖拽效果如下：



　　只有支持 HTML5 方式的浏览器才提供拖拽功能，如较新版本的 Chrome，FireFox 等；
　　Safari 上的拖拽区域不会显示出来（因为没法 drop 到一个 div 上，谁有解决的办法吗？），需要拖拽到上传按钮上，并且同时拖拽多个文件到上传按钮时，也只上传一个文件（这是 Safari 的一个 Bug，有办法解决吗？）。

　　点击文件名称进行下载：



　　这里比较麻烦的是中文文件名的编码，不同浏览器需要使用不同的编码，在 Java 中进行文件名编码，实现如下：

　　JS 代码

　　在服务器端 JS 中，使用importPackage 导入 pure.tools 包，在需要的地方调用 Tools 类的方法进行上传下载。
　　api.js 中的相关实现如下：
importPackage(Packages.purejs.tools);api = {// Other codes...upload: function(params, req, res) {var size = parseFloat(req.getHeader('Content-Length'));if (!size || size <= 0 ) {throw 'Invalid Content-Length';} else if (size > 1000 * 1024 * 1024) {throw 'File too large.';}var prefix = new Date().getTime() + '-';var name = prefix + Tools.getFileName(req, 'Filedata');var target = 'upload/' + name;var size = Tools.upload(req, 'Filedata', target);return { name: name, size: size };},download: function(params, req, res) {var name = '' + params.name;name = name.substr(name.indexOf('-') + 1);var source = 'upload/' + params.name;Tools.download(req, res, name, source);}};


　　这篇文章就先介绍到这里，下一篇文章里我们再深入探讨其中的实现细节。
　　欢迎指出 bug 或提出代码重构等方面的建议。
　　谢谢。