表单提交并上传附件（异步）

业务场景是填写表单并选择需要上传的附件，在选择附件的时候，就将附件上传，然后将附件的名称回显在表单中并带有删除按钮，可以删除。点击表单提交，将包含附件信息的表单一起提交，表单信息入库表单信息表并返回当前入库表单信息数据的自增id，通过自增id附件信息入库附件信息表并与表单关联，形成一对多关系。
html关键代码如下：

<div class="unit">
	<div class="left"><p class="subtitle">附件</p></div>
	<div id="uploadAttach" class="right border">
		<div class="buttons-wrap">
			<input type="button" id="uploadAttachBtn" class="button post-send" style="margin:10px 0 10px 10px;" value="上传附件" onclick="$('#uploadAttachFile').click()" />
			<input type="file" class="hide" id="uploadAttachFile" />
		</div>
		<div id="attachList">
		<div></div>
		<span class="clearfix"></span>
</div>
...
<script>
...
var attList = [];
var aid = 0;
$(function(){
	var uploadFile = javaex.upload({
		type:"file",
		url:"${pageContext.request.contextPath}/upload_info/upload_vote.json",
		id:"uploadAttachFile",//<input type="file"/>的id
		maxSize:"300",
		param:"file",//参数名称，ssm中与multipartFile的参数名保持一致
		callback:function(rtn){
			if(rtn.code=="0000" && rtn.data != undefined && rtn.data != null){
				var attInfo.id = rtn.data.voteFile;
				attInfo.id = aid;
				$("#attachList").append("<div id=\"attItem"+aid+"\" class=\"attachItem\">"+attInfo.fileOldName+"<img src=\"${pageContext.request.cotextPath}/static/default/ael_attach.png\" onclick=\"delAttach("+aid+")\"/></div>");
				attList.push(attInfo);
				aid++;
			} else {
				javaex.optTip({
					content:rtn.message,
					type:"error"
				})
			}
		}
	})
});
//删除页面上显示发附件文件
function delAttach(aid){
	for(var i=0;i<attList.length;i++){
		if(attList[i].id == aid){
			attList.splice(i,1);
			$("#attItem"+aid).remove();
			break;
		}
	}
}
</script>

js中关键代码如下：

//点击提交表单按钮
$("#save").click(function(){
	var arrListStr = JSON.stringify(attList);
	$.ajax({
		url:"save_newvote.json",
		type:"post",
		dataType:"json",
		date:{
			...
			"arrListStr" : arrListStr,
			...
		},
		success : function(rtn){
			...
		}
		...
	})
})

OpenAction代码如下：

@RequestMapping("upload_vote.json")
@ResponseBody
public Result uploadVote(MultipartFile file) throws IOException,QingException{
	VoteFile voteFile = uploadInfoService.uploadVoteFile(file);
	if(voteFile != null){
		return Result.success().add("voteFile",voteFile);
	}
}

UploadInfoService代码如下：

public VoteFile uploadVoteFile(MultipartFile file) throws IOException,QingException{
	if(StringUtils.isBlank(file.getOriginalFilename())){
		return null;
	}
	VoteFile voteFile = new VoteFile();
	voteFile.setFileUploadTime(DateUtils.getNowTime(DateUtils.DATE_TIME_PATTERN));
voteFile.setFileOldName(file.getOriginalFilename());
//获取上传文件的文件名，变为时间+文件名
String[] split = file.getOriginalFilename().split("\\.");
String fileName = String.valueOf(System.currentTimeMillis())+"."+(split[1]);
String filePath = Props.getInstance().getProp("wenjianPath")+fileName;//从properties中拿到wenjianPath的路径
//创建文件对象
File tageFile = new File(filePath);
//文件名不存在则新建文件，并将文件复制到新建文件夹中
if(!tageFile.exists()){
	try{
		tagetFile.createNewFile();
		file.transferTo(tagetFile);
		voteFile.setFileNewName(fileName);
		voteFile.setFilePath(filePath);
	} catch (Exception e){
		e.printStackTrace();
		return null;
	}
}
	return voteFile;
}

点击提交表单走的controller如下：

@RequestMapping("save_newvote.json")
@ResponseBody
public Result saveNewVote(HttpServletRequest request,...,@RequestParam(value="attListStr") String attListStr) throws parseException{
......
//拿到图片信息
List<VoteFile> voteFile = null;
if(StringUtil.isNotEmpty(attListStr)){
	voteFile = new ArrayList<VoteFile>();
	JSONArray jAttList = JSONArray.fromObject(attListStr);
	for(int i = 0;i<jAttList.size();i++){
		JSONObject  jAttInfo = jAttList.getJSONObject(i);
		voteFile voteFileInfo = new VoteFile();
		voteFileInfo .setFileUploadTime(jAttInfo.getString("fileUploadTime"));
		voteFileInfo .setFileOldName(jAttInfo.getString("fileOldName"));
		voteFileInfo .setFileNewName(jAttInfo.getString("fileNewName"));
		voteFileInfo .setFilePath(jAttInfo.getString("filePath"));
		voteFile.add("voteFileInfo");
	}
}
//保存表单信息，并把保存后的表单信息的自增id拿到
VoteInfo voteInfo = new VoteInfo();
voteInfo.set....
...
voteInfoService.saveVote(voteInfo);
//保存附件信息
if(voteFile != null && !voteFile.isEmpty()){
	for(VoteFile voteFileInfo:voteFile){
	//下面的voteInfo.getId()是insert表单信息的时候，通过selectKey拿到的id
		voteFileInfo.setVid(voteInfo.getId());//通过vid关联起来两个表
		voteInfoService.saveVoteFile(voteFileInfo);
	}
}
}