利用HTML5拖放技术实现多文件异步上传 - 四川理工学院学报.PDF

第２８卷第１期 四川理工学院学报（自然科学版） Ｖｏｌ２８　Ｎｏ１ ２０１５年２月 ＪｏｕｒｎａｌｏｆＳｉｃｈｕａｎＵｎｉｖｅｒｓｉｔｙｏｆＳｃｉｅｎｃｅ＆Ｅｎｇｉｎｅｅｒｉｎｇ（ＮａｔｕｒａｌＳｃｉｅｎｃｅＥｄｉｔｉｏｎ） Ｆｅｂ２０１５ 文章编号：１６７３１５４９（２０１５）０１００１７０５ ＤＯＩ：１０．１１８６３／ｊ．ｓｕｓｅ．２０１５．０１．０５ 利用 ＨＴＭＬ５拖放技术实现多文件异步上传 刘耀钦 （郧阳师范高等专科学校计算机科学系，湖北 十堰 ４４２０００） 　　摘　要：在传统的Ｗｅｂ应用中实现本地文件的跨浏览器应用，不仅要编写大量冗余代码，而且很难 获取良好的用户体验。ＨＴＭＬ５利用拖放技术将本地文件拖放至浏览器，通过ＦｉｌｅＡＰＩ的ｄａｔａＴｒａｎｓｆｅｒ对 象获取文件属性，然后将符合条件的文件添加至由ＦｏｒｍＤａｔａ生成的模拟表单中，最后由Ａｊａｘ的ＸＭＬＨｔ ｔｐＲｅｑｕｅｓｔ将表单内容提交给服务器，进而实现本地文件的拖放和异步上传。这极大地提升了用户体验， 减轻了服务器负载。基于拖放技术的文件异步上传是Ｗｅｂ应用的一种新型技术形式，有较良好的应用 前景。 关键词：ＨＴＭＬ５；拖放；异步；Ａｊａｘ；ＦｉｌｅＡＰＩ 中图分类号：ＴＰ３１１ 文献标志码：Ａ 页面存在或返回一个 ｆｏｒｍ表单元素。文件的异步上 引 言 传就是通过使用该对象直接与 Ｗｅｂ服务器进行通 在Ｗｅｂ应用系统中，若要获得本地文件句柄，需要 ［５］ 信 ，在页面不重载或不转向的情况下将文件上传请 通过打开对话框找到文件位置，然后获取文件路径，若 求发送至服务器并返回处理结果，进而实现文件异步 需要上传的文件有多个，就需要多次重复操作，过程不 传输。相对传统的浏览同步提交，文件拖拽的异步传 仅繁琐，而且无法获得良好的用户体验。ＨＴＭＬ５作为 输方式既提升了用户体验，又减轻了服务器负载，是 Ｗｅｂ前端开发的新标准超文本标记语言，不仅简化了传 ＨＴＭＬ５环境下Ｗｅｂ应用的一种新型技术形式，也是目 统ＨＴＭＬ标签语法，而且提供了诸如智能表单、离线缓 前本地文件Ｗｅｂ传输瓶颈的解决途径之一，有着较为 存、Ｃａｎｖａｓ绘图、拖放等核心技术和相应的ＡＰＩ，相比以 广阔的应用前景。 前版本的ＨＴＭＬ，ＨＴＭＬ５极大地改善和增强了用户体验 ［１］ １ 原理和架构 和开发功能 ，降低了浏览器对资源的占有率以及对插 ［２］ 件的依赖 ，解决了ＨＴＭＬ４在 Ｗｅｂ应用功能上的欠 １１ 原理 ［３］ 在ＨＴＭＬ５以前，要实现Ｗｅｂ对象的拖放操作不仅 缺 。其中的拖放技术和ＦｉｌｅＡＰＩ既实现了同一Ｗｅｂ页 面内部不同对象之间的拖放，又建立起了本地文件与Ｗｅｂ 需要逐一实现ｍｏｕｓｅＤｏｗｎ、ｍｏｕｓｅＭｏｖｅ、ｍｏｕｓｅＵｐ等一系列 页面之间的关联，使得多文件直接拖放上传成为可能。 鼠标事件，而且还需要编写大量ＪＳ代码，编写完的应用 ［４］ ［６］ Ａｊａｘ的ＸｍｌＨｔｔｐＲｅｑｕｅｓｔ 对象具有对ＨＴＴＰ协议的 程序体积庞大、代码冗余 ，更为主要的是这些冗余的 完全访问能力，包括对 ＰＯＳＴ、ＨＥＡＤ以及 ＧＥＴ等请求 代码仅仅能实现浏览器内部对象的相互拖放。ＨＴＭＬ５ 处理的能力，用来实现发送和接收 ＨＴＴＰ请求与