一种异步批量文件传输并验证的方法实现

付晓明

摘要：实例讲解如何使用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验证结果表单页面，这样才能达到预期效果。