Bootstrap Fileinput 4.4.7文件上传实例详解

2023-09-09 20:46:05 295

本实例所做功能为发送带附件邮件，可以上传多个附件，操作为选择一个附件以后自动上传，然后继续选择附件，填写完表单其他信息，点击保存发送带附件邮件。

HTML标签

js初始化，设置全局文件名参数

varfileName=[];
functioninitFileInput(id,url){
$("#"+id).fileinput({
language:'zh',
uploadAsync:false,
uploadUrl:url,
browseClass:"btnbtn-secondary",
textEncoding:"UTF-8",
showUpload:false,
showPreview:true,
dropZoneEnabled:false,
maxFileCount:5,
fileActionSettings:{
showUpload:true
},
enctype:'multipart/form-data',
msgFilesTooMany:"选择上传的文件数量({n})超过允许的最大数值{m}！",
}).on("filebatchselected",function(event,files){
$("#fileUpload").fileinput("upload");
}).on("filebatchuploadsuccess",function(event,data,previewId,index){
if(data.response.success==true)
{
fileName.push(data.response.fileName);
}else{
alert("上传失败!");
}
$("#fileUpload").fileinput("clear");
$("#fileUpload").fileinput("reset");
}).on('fileerror',function(event,data,msg){
alert(msg);
});
}

java后台上传文件代码

@RequestMapping(value="/fileupload")
@ResponseBody
publicMapfileUpload(HttpServletRequestrequest,HttpServletResponseresponse){
ResourceBundlebundle=PropertyResourceBundle.getBundle("application");
MultipartHttpServletRequestmultipartRequest=(MultipartHttpServletRequest)request;
MapfileMap=multipartRequest.getFileMap();
StringrootPath=bundle.getString("upLoadUrl");
StringfilePath=rootPath;
Mapmap=newHashMap<>();
map=uploadFiles(filePath,fileMap);
returnmap;
}

实际上传操作，返回上传操作经过处理的文件名，保证服务器端文件名唯一

publicMapuploadFiles(StringsavePath,MapfiLeMap){
Mapmap=newHashMap<>();
try{
StringfileName="";
if(fiLeMap!=null){
for(Map.Entryentity:fiLeMap.entrySet()){
MultipartFilef=entity.getValue();
if(f!=null&&!f.isEmpty()){
Stringuuid=UUID.randomUUID().toString();
fileName=uuid+"#"+f.getOriginalFilename();
FilenewFile=newFile(savePath+"/"+fileName);
f.transferTo(newFile);
}
}
}
map.put("success",true);
map.put("fileName",fileName);
returnmap;
}catch(Exceptione){
map.put("success",false);
returnmap;
}
}

ajax提交其他表单参数和所传附件文件名集合

$.ajax({
type:"POST",
url:所需要请求地址,
dataType:"json",
traditional:true,
data:{
service:$("#service").select2('val').replace("All",""),
startTime:$("#start").val(),
endTime:$("#end").val(),
reason:$("#reason").val(),
fileName:JSON.stringify(fileName),
outterEmail:isOutterEmail,
innerEmail:isInnerEmail,
isSendEmail:isSendEmail,
subService:$("#subService").select2('val'),
runningStatus:$("#runningStatus").select2('val')
},
success:function(data){
$("#loadingModal").modal("hide");
fileName.splice(0,fileName.length);
alert(data.msg);
if(data.success){
location.href="revision";
}
},
error:function(xhr){
$("#loadingModal").modal("hide");
alert("保存失败");
}
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

Bootstrap Fileinput 4.4.7文件上传实例详解

热门推荐

随机推荐