表单提交并上传附件（异步）
业务场景是填写表单并选择需要上传的附件，在选择附件的时候，就将附件上传，然后将附件的名称回显在表单中并带有删除按钮，可以删除。点击表单提交，将包含附件信息的表单⼀起提交，表单信息⼊库表单信息表并返回当前⼊库表单信息数据的⾃增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" value="上传附件" onclick="$('#uploadAttachFile').cl ick()" />
<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:"${tPath}/upload_info/upload_vote.json",
id:"uploadAttachFile",//<input type="file"/>的id
maxSize:"300",
param:"file",//参数名称，ssm中与multipartFile的参数名保持⼀致
callback:function(rtn){
de=="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=\"${Path}/static/defa ult/ael_attach.png\" onclick=\"delAttach("+aid+")\"/></div>");
attList.push(attInfo);
aid++;
} else {
javaex.optTip({
ssage,
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")
getsavefilename
@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.OriginalFilename())){
return null;
}
VoteFile voteFile = new VoteFile();
voteFile.NowTime(DateUtils.DATE_TIME_PATTERN));
voteFile.OriginalFilename());
//获取上传⽂件的⽂件名，变为时间+⽂件名
String[] split = OriginalFilename().split("\\.");
String fileName = String.valueOf(System.currentTimeMillis())+"."+(split[1]);
String filePath = Instance().getProp("wenjianPath")+fileName;//从properties中拿到wenjianPath的路径//创建⽂件对象
File tageFile = new File(filePath);
//⽂件名不存在则新建⽂件，并将⽂件复制到新建⽂件夹中
if(!ists()){
try{
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 = JSONObject(i);
voteFile voteFileInfo = new VoteFile();
voteFileInfo .String("fileUploadTime"));
voteFileInfo .String("fileOldName"));
voteFileInfo .String("fileNewName"));
voteFileInfo .String("filePath"));
voteFile.add("voteFileInfo");
}
}
//保存表单信息，并把保存后的表单信息的⾃增id拿到
VoteInfo voteInfo = new VoteInfo();
...
voteInfoService.saveVote(voteInfo);
//保存附件信息
if(voteFile != null && !voteFile.isEmpty()){
for(VoteFile voteFileInfo:voteFile){
//下⾯的Id()是insert表单信息的时候，通过selectKey拿到的id
voteFileInfo.Id());//通过vid关联起来两个表
voteInfoService.saveVoteFile(voteFileInfo);
}
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。