一種異步批量文件傳輸并驗證的方法實現

付曉明

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

關鍵詞：ajax異步批量上傳文件驗證

前言

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

1需求的提出

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

2實現思路

本文以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（“上傳失敗”）;}}）;}

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

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

3結語

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