基于jQueryEasyUI框架的动态多文件上传的实现

谷洪彬

摘 要： 很多Web应用系统需要多文件上传功能，实际需求中文件个数并不固定，所以需要系统提供动态添加文件上传文本框功能，这样的功能可以通过JavaScript或者jQuery实现。为了增强用户友好性，文章用jQuery EasyUI框架实现了多文件上传的界面，并解决了实现过程中遇到的各种问题。

关键词： 动态的文件上传； jQuery EasyUI框架； 用户友好性； Web应用系统

中图分类号：TP311 文献标志码：A 文章编号：1006-8228（2017）09-45-03

Abstract： Many Web applications need the function of multiple file upload， but the actual demanded number of files is not fixed， so require the system to provide a text box for dynamically adding the files to be uploaded， and this function can be realized by JavaScript or jQuery. In order to enhance the user friendliness， this paper implements the multi-file upload interface with the jQuery EasyUI framework， and solves various problems encountered in the implementation process.

Key words： multi-file upload； jQuery EasyUI framework； user friendliness； Web application system

0 引言

包括OA和CMS在内的很多Web应用系统需要多文件上传功能[1-2]，由于实际应用中文件个数不能实现确定，就需要为用户提供动态添加功能，动态添加文件文本框可以通过JavaScript或者jQuery实现。用户友好性是Web应用除了功能之外最重要的部分，为了增强用户友好性，文本使用了jQuery EasyUI作为多文件上传的界面。

1 EasyUI的引用和EasyUI实现的单个文件上传文本框界面

1.1 EasyUI的引用

2.3 文件上传功能实现的验证

最后由后端代码来完成文件上传功能，这样的实例代码很多，简单起见，我们用PHP做个各显示上传后文件名的代码片段[5]，真正的文件上传代码还需要自己完善，最好是加上Ajax[6]功能实现后台文件上传：

3 结束语

软件开发除了功能性，用户友好性也越来越重要。近年Web应用对用户的友好性很重视，这也促进了JavaScript及其框架的发展，开发者初次使用这些框架时，难免会遇到各种各样的问题，会耽误开发进度，但是系统的用户友好性确实得到了极大的提升，这些努力是值得的，而且由于代码和经验可以积累，在以后的项目开发中使用同样的技术，开发效率会提高不少。下一步需要考虑的是，文件在后台通过Ajax上传，这样不用通过前台form的跳转，用户体验会更好。

参考文献（References）：

[1] 代威，董运成.基于jQuery EasyUI与Spring MVC框架的信

息管理系统自动提示的设计与实现[J].信息与电脑（理论版），2016.13：33-34

[2] 黄培泉.基于.NET与EasyUI的工资查询系统的设计与实现[J].

福建电脑，2013.4：104-106

[3] 麦克皮克，威尔顿.JavaScript入门经典（第5版）[M].清华大学

出版社，2016.

[4] 比尔·比博尔特，叶华达·卡兹.jQuery实战（第3版）[M].华中

科技大学出版社，2016.

[5] 张跃旭，孙文毅，王春来.PHP的文件上传技术[J]. 辽宁师专

學报，2008.6：36-37

[6] 温立辉.AJAX异步交互技术浅析[J].山东工业技术，2017.4.endprint