張立濤++阮智++汪玲++田越

摘要：文件上傳功能在Java web開發(fā)的網(wǎng)站中有著廣泛的應(yīng)用，在傳統(tǒng)功能的基礎(chǔ)上，通過數(shù)據(jù)封裝技術(shù)和遞歸算法的使用，實(shí)現(xiàn)了多級獨(dú)立目錄文件的上傳，滿足了用戶新的需求。

關(guān)鍵詞：文件上傳；獨(dú)立目錄；遞歸；JavaScript

中圖分類號：TB

文獻(xiàn)標(biāo)識碼：A

doi：10.19311/j.cnki.16723198.2017.15.091

1現(xiàn)狀與新需求

文件上傳是Java Web系統(tǒng)中很常見的一種處理，一般通過客戶端Form表單，基于HTTP的RFC1867上傳規(guī)范實(shí)現(xiàn)文件數(shù)據(jù)的傳輸和解析?，F(xiàn)在的網(wǎng)站中，大量的使用到了文件上傳的功能。一般來說都是每次只能上傳一個文件，利用來實(shí)現(xiàn)的，input標(biāo)簽放在一個form表單，最后把數(shù)據(jù)提交到后臺，后臺邏輯處理時一般就是讓一個文件名對應(yīng)著一個目錄。

有些時候會出現(xiàn)一些新的需求，比如在某高校大學(xué)生創(chuàng)新學(xué)分管理系統(tǒng)中，教師審核學(xué)生的證明材料。由于每個學(xué)生的加分項(xiàng)目不止一個，每個項(xiàng)目的證明材料也是多個，傳統(tǒng)的文件上傳就是一個材料生成一個文件夾，這樣做的后果會讓審核人員弄不清楚某個證明材料是證明哪個項(xiàng)目的，給審核帶來了麻煩。為了方便審核，老師就希望得到這樣的目錄結(jié)構(gòu)：班里每個同學(xué)都有一個文件夾，一個同學(xué)的文件夾下有若干項(xiàng)目的文件夾，這些具體的項(xiàng)目文件夾下有著該項(xiàng)目的具體證明材料的文件。

一個具體的例子，一個班級有28個學(xué)生，這個時候有28個以同學(xué)姓名加學(xué)號命名的文件夾；其中有個叫張立濤的同學(xué)，他有三個項(xiàng)目可以加分，這樣張立濤201405165034的文件夾下就有3個項(xiàng)目的文件夾；其中一個項(xiàng)目是科研訓(xùn)練類，證明材料有5張圖片和一份Word文檔，科研訓(xùn)練類科研項(xiàng)目（國家級）完成立項(xiàng)申報、實(shí)驗(yàn)研究、結(jié)題等全過程且項(xiàng)目結(jié)題通過驗(yàn)收第二負(fù)責(zé)人文件夾下有6個具體的文件。通過這樣的處理，審核老師就可以很方便的找到某個學(xué)生的某個項(xiàng)目的證明材料，進(jìn)而對創(chuàng)新學(xué)分進(jìn)行審核。效果如圖2、圖3所示。

2設(shè)計思想

為了解決上述所面臨的的新需求，本文提出了如下的設(shè)計思路（圖4）：

學(xué)生在網(wǎng)頁上通過文件上傳按鈕來上傳文件，然后JavaScript的方法就會把這些文件的數(shù)據(jù)進(jìn)行封裝；學(xué)生可以多次的點(diǎn)擊上傳按鈕，這樣可以把一個項(xiàng)目的所有證明材料一起上傳，JavaScript方法可以把這些數(shù)據(jù)批量封裝然后提交到后臺處理。

后臺接收到數(shù)據(jù)，然后構(gòu)建文件路徑的字符串，最后利用遞歸算法創(chuàng)建獨(dú)立目錄的文件夾。

3設(shè)計與實(shí)現(xiàn)

3.1數(shù)據(jù)封裝

文件多次上傳的實(shí)現(xiàn)，點(diǎn)擊上傳附件的時候后調(diào)用js的previewFiles（）方法，通過document.getElementById（）獲取到input和li標(biāo)簽的值。把獲取的文件名在頁面輸出，然后把input的id屬性值和一個逗號添加到filesArray上，再把li標(biāo)簽隱藏起來，把全局變量count的值加1，使得再次調(diào)用previewFiles（）方法時，會得到不同count；最后生成新的li和input標(biāo)簽。這樣在頁面上就會出現(xiàn)一個外形相同的上傳附件按鈕。

數(shù)據(jù)封裝，previewFiles（）方法中的filesArray字符串保存了多個文件的數(shù)據(jù)，并且做了特殊的處理，使之能被后臺直接使用。最后調(diào)用upload（）方法，把封裝好的數(shù)據(jù)傳遞到后臺。

• <！—文件上傳的按鈕-->

  onchange="previewFiles（）" />上傳附件

Js文件的代碼

var count = 0；

function previewFiles（） {

var time = new Date（）.Format（"yyyy-MM-dd hh：mm"）；

var files = document.getElementById（"_files" + count）.value；

var filelist = document.getElementById（"files"）；

var fileName = getFileName（files）；

var lis = document.createElement（"li"）；

filelist.appendChild（lis）；

lis.innerHTML = fileName + "" + time + ""；

// 隱藏和創(chuàng)建新的文件上傳input

document.getElementById（"uploadFilesLi" + count）.style.display = "none"；// 隱藏

filesArray += "_files" + count + "，"；

count++；

var liFile = document.createElement（"li"）；

liFile.setAttribute（"class"， "uploadFiles"）；

liFile.setAttribute（"id"， "uploadFilesLi" + count）；

var liHtml = " 上傳附件"；

liFile.innerHTML = liHtml；

$（'#operationUl'）.prepend（liFile）；

}

function upload（） {

$（"#submitBtn"）.attr（"disabled"， true）；

filesArray = filesArray.substring（0， filesArray.length - 1）；

$.ajaxFileUpload（{

url ： 'projectAction_uploadProject.do'， // 用于文件上傳的服務(wù)器端請求地址

secureuri ： false， // 一般設(shè)置為false

fileElementId ： filesArray， // 文件上傳空間的id屬性

dataType ： 'json'， // 返回值類型 一般設(shè)置為json

success ： function（data， status） {

// 就是root對應(yīng)的值這里是result??！

var member = eval（"（" + data + "）"）； // 包數(shù)據(jù)解析為json

if （member.result == "success"） {

alert（"保存成功"）；

window.parent.close（）；

} else {

alert（"保存失敗"）；

window.location.reload（）；

}

}，

error ： function（data， status， e）// 服務(wù)器響應(yīng)失敗處理函數(shù)

{

alert（"上傳失敗，不支持上傳格式"）；

}

}）；

}

3.2遞歸算法創(chuàng)建文件夾

遞歸算法的特點(diǎn)，它簡化了程序設(shè)計的很多過程，并且使程序結(jié)構(gòu)清晰，程序的易讀性也很好，其正確性容易得到驗(yàn)證，給程序開發(fā)人員帶來了很大的方便。對于文件的獲取，首先定義了一個文件數(shù)組和一個文件名數(shù)組，Struts框架會利用文件攔截器把前臺文件數(shù)據(jù)放在聲明的文件數(shù)組里面，文件名字會封裝在文件名數(shù)組中。接下來利用java的字符串對象構(gòu)建文件目錄路徑，比如：學(xué)院/畢業(yè)屆數(shù)/專業(yè)/班級/學(xué)生+學(xué)號/項(xiàng)目類別這樣結(jié)構(gòu)，最后利用遞歸的思想逐級創(chuàng)建的好文件夾。

private void createDir（String realPath， String dirNames） {

String absRealPath = realPath + dirNames + "/"；

File file = new File（absRealPath）；

// 如果文件夾不存在則創(chuàng)建

if （！file.exists（）） {

file.mkdirs（）；

}

}

通過短短幾行代碼，就可以實(shí)現(xiàn)新需求所需要的文件目錄結(jié)構(gòu)。

4結(jié)束語

通過JavaScript和Ajax技術(shù)的結(jié)合使用，還有前臺JSP頁面和后臺邏輯代碼的巧妙處理，實(shí)現(xiàn)了多文件上傳，并且生成獨(dú)立目錄，從而滿足了我們的需求。前臺代碼使用了循環(huán)，提高了代碼的可重用性，后臺代碼使用了遞歸算法，使邏輯清晰，并且減少了代碼的使用量。

參考文獻(xiàn)

[1]陳曉華，田剛.關(guān)于JSP無組件文件上傳的研究與實(shí)現(xiàn)[J].計算機(jī)與現(xiàn)代化，2011，（3）：131133.

[2]劉曉華，張健，周慧貞.JSP應(yīng)用開發(fā)詳解[M].北京：電子工業(yè)出版社，2007.

[3]張素霞.基于數(shù)據(jù)結(jié)構(gòu)的程序遞歸算法設(shè)計[J].硅谷，2012，（12）：4848.