付曉明

摘要：實例講解如何使用Ajax實現(xiàn)異步批量文件上傳，并對上傳文件進(jìn)行驗證，將顯示所有文件驗證結(jié)果，本文以dwz的批量上傳控件為例，使用springMVC和dwzUI來實現(xiàn)。

關(guān)鍵詞：ajax異步批量上傳文件驗證

前言

文件上傳可以說是任何信息管理系統(tǒng)必備的功能，隨著前端技術(shù)的不斷革新，各種UI框架都提供了上傳控件，支持單個文件和多文件上傳，有些文件在上傳后提交至系統(tǒng)之前需要對文件的正確性進(jìn)行驗證，以提高用戶體驗，使用戶有針對性的對不合格文件進(jìn)行加工并重新上傳，因為驗證的方法和內(nèi)容必須根據(jù)業(yè)務(wù)的要求而設(shè)計所以大多數(shù)的UI框架并不提供這個功能本文將從實際需求出發(fā)，將實現(xiàn)思路和方法在此進(jìn)行共享。

1需求的提出

業(yè)務(wù)系統(tǒng)中用戶需要上傳批量文件時，控件只能對文件類型進(jìn)行控制，而大部分系統(tǒng)都需要對上傳文件進(jìn)行驗證，并且合格后才能保存到系統(tǒng)中。這其中最常見的業(yè)務(wù)就是分析上傳文件名稱，驗證唯一性或者文件名稱命名規(guī)則等。甚至有分析文件包結(jié)構(gòu)、文件內(nèi)容等，這些都需要開發(fā)者自定義業(yè)務(wù)邏輯使用各種方法通知用戶，然后用戶根據(jù)提示信息進(jìn)行選擇是否繼續(xù)操作。為了方便用戶對上傳文件進(jìn)行篩選，希望能夠?qū)Ⅱ炞C結(jié)果直接呈現(xiàn)給用戶，通過的直接注明，未通過的將驗證結(jié)果追加到文件后，并為所有上傳文件提供刪除功能直接從服務(wù)器上刪除曲于支持的上傳的文件數(shù)量眾多，所以驗證結(jié)果應(yīng)該使用表格來統(tǒng)一顯示，表格的項目應(yīng)該包含文件名、是否通過、驗證結(jié)果、操作，下面將詳細(xì)說明如何實現(xiàn)。

2實現(xiàn)思路

本文以dwzUI多文件上傳控件為例，如圖1，

控件代碼如下：

data：{"cancellmg"iuploaderOption.cancellmg，

”folder" iuploaderOption.folder，

”uploadLimit”： uploaderOption.uploadLimit，

”file SizeLimit”：uplo adero ption.fileSizeLirnit，

”filePathLength" ：uploaderOption.filePathLength，

‘s ervic e Cla s S”：uplo a der010 tion.serviceClassName

}，success： function （data， status）{

if（data.statusCode一一”200"）{

var msg—data.message.split（“*”）;

for（var j=l;j

result一msgLjl.split（"l"）;

$（”# fileQ ueue

table”）.append（” "+result Lol+'l< /td> ” +result[1]+”<1td>"+result[21+"1）;}}else{alertMsg.error（data.message）;}}，

errori function （data， status， e）{alertMsg.error（“上傳失敗”）;}}）;}

對驗證結(jié)果表格中的上傳文件提供刪除功能，也是ajax異步請求服務(wù)器，完成刪除服務(wù)器上文件的操作，并使用_this.parent（）.parent（）.remove（）移除被刪除文件信息。

需要注意的是，在form表單中增加enctype屬性才能支持批量上傳enctype=”rnultipart/form-data”。

3結(jié)語

為了方便在各系統(tǒng)中調(diào)用此功能，需要將js方法包裝成js文件，引用到頁面中，并將驗證結(jié)果表單作為獨立的jSp頁面，上傳頁面使用include來引用該jsp驗證結(jié)果表單頁面，這樣才能達(dá)到預(yù)期效果。