基于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