谷洪彬

摘 要： 很多Web應(yīng)用系統(tǒng)需要多文件上傳功能，實(shí)際需求中文件個(gè)數(shù)并不固定，所以需要系統(tǒng)提供動(dòng)態(tài)添加文件上傳文本框功能，這樣的功能可以通過(guò)JavaScript或者jQuery實(shí)現(xiàn)。為了增強(qiáng)用戶友好性，文章用jQuery EasyUI框架實(shí)現(xiàn)了多文件上傳的界面，并解決了實(shí)現(xiàn)過(guò)程中遇到的各種問(wèn)題。

關(guān)鍵詞： 動(dòng)態(tài)的文件上傳； jQuery EasyUI框架； 用戶友好性； Web應(yīng)用系統(tǒng)

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：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在內(nèi)的很多Web應(yīng)用系統(tǒng)需要多文件上傳功能[1-2]，由于實(shí)際應(yīng)用中文件個(gè)數(shù)不能實(shí)現(xiàn)確定，就需要為用戶提供動(dòng)態(tài)添加功能，動(dòng)態(tài)添加文件文本框可以通過(guò)JavaScript或者jQuery實(shí)現(xiàn)。用戶友好性是Web應(yīng)用除了功能之外最重要的部分，為了增強(qiáng)用戶友好性，文本使用了jQuery EasyUI作為多文件上傳的界面。

1 EasyUI的引用和EasyUI實(shí)現(xiàn)的單個(gè)文件上傳文本框界面

1.1 EasyUI的引用

2.3 文件上傳功能實(shí)現(xiàn)的驗(yàn)證

最后由后端代碼來(lái)完成文件上傳功能，這樣的實(shí)例代碼很多，簡(jiǎn)單起見，我們用PHP做個(gè)各顯示上傳后文件名的代碼片段[5]，真正的文件上傳代碼還需要自己完善，最好是加上Ajax[6]功能實(shí)現(xiàn)后臺(tái)文件上傳：

3 結(jié)束語(yǔ)

軟件開發(fā)除了功能性，用戶友好性也越來(lái)越重要。近年Web應(yīng)用對(duì)用戶的友好性很重視，這也促進(jìn)了JavaScript及其框架的發(fā)展，開發(fā)者初次使用這些框架時(shí)，難免會(huì)遇到各種各樣的問(wèn)題，會(huì)耽誤開發(fā)進(jìn)度，但是系統(tǒng)的用戶友好性確實(shí)得到了極大的提升，這些努力是值得的，而且由于代碼和經(jīng)驗(yàn)可以積累，在以后的項(xiàng)目開發(fā)中使用同樣的技術(shù)，開發(fā)效率會(huì)提高不少。下一步需要考慮的是，文件在后臺(tái)通過(guò)Ajax上傳，這樣不用通過(guò)前臺(tái)form的跳轉(zhuǎn)，用戶體驗(yàn)會(huì)更好。

參考文獻(xiàn)（References）：

[1] 代威，董運(yùn)成.基于jQuery EasyUI與Spring MVC框架的信

息管理系統(tǒng)自動(dòng)提示的設(shè)計(jì)與實(shí)現(xiàn)[J].信息與電腦（理論版），2016.13：33-34

[2] 黃培泉.基于.NET與EasyUI的工資查詢系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].

福建電腦，2013.4：104-106

[3] 麥克皮克，威爾頓.JavaScript入門經(jīng)典（第5版）[M].清華大學(xué)

出版社，2016.

[4] 比爾·比博爾特，葉華達(dá)·卡茲.jQuery實(shí)戰(zhàn)（第3版）[M].華中

科技大學(xué)出版社，2016.

[5] 張躍旭，孫文毅，王春來(lái).PHP的文件上傳技術(shù)[J]. 遼寧師專

學(xué)報(bào)，2008.6：36-37

[6] 溫立輝.AJAX異步交互技術(shù)淺析[J].山東工業(yè)技術(shù)，2017.4.endprint