Java Web使用Html5 FormData实现多文件上传功能

2024-02-06 01:40:04 303

前一阵子,迭代一个线上的项目,其中有一个图片上传的功能,之前用的ajaxfileupload.js来实现上传的,不过由于ajaxfileupload.js,默认是单文件上传(虽然可以通过修改源码的方法来实现多文件上传),又加上是在移动端做的,所以就打算采用html5的FormData实现多文件上传

首先html页面定义有两种:

Html1

Html2

项目中我采用了Html2的方式

再看看上传的JS部分吧:

$(document).on("change",".upload-imginput:file",function(){
varfileId=$(this).attr("id");
vart_files=this.files;
varimglength=$("#view_"+fileId).parent().parent().find(".upload-img").length;
if(imglength==1){
if(t_files.length>5){
newMessage().showMsg("最多选择五张图片");
returnfalse;
}elseif(t_files.length<1){
newMessage().showMsg("至少选择一张图片");
returnfalse;
}
}elseif(t_files.length+imglength>6){
newMessage().showMsg('最多再选择'+(6-parseInt(imglength))+'张图片');
returnfalse;
}
vardata=newFormData();
for(vari=0;i

'); $("#view_"+fileId).parent().nextAll().find('span').eq(0).text(parseInt($("#view_"+fileId).parent().nextAll().find('span').eq(0).text())+1); $("#view_"+fileId).parent().nextAll().find('span').eq(1).text(5-parseInt($("#view_"+fileId).parent().nextAll().find('span').eq(0).text())); }else{ $("#view_"+fileId).attr('src',imgUrl); $("#view_"+fileId).nextAll().find('input').hide(); $("#view_"+fileId).parent().nextAll().remove('p'); } } } }).fail(function(res){ //console.log("error") })

上面第19行代表初始化formdata对象,其有两种创建方法,对于使用html2来说使用该方式来创建,使用html1来说可以使用vardata=newFormData(document.getElementById("#formfile");两种创建方式基本没有区别;第22-23行是可以给formdata添加其他属性的,,按需选择,21行是添加文件必须要写的.ajax部分3233行是必须要设置的,网上有说明,我就不多说了;

Java代码部分:

publicvoidmultipleCommentImageUpload(HttpServletRequestrequest,HttpServletResponseresponse,@RequestParam(value="file",required=false)Listfiles){
response.setContentType("text/html;charset=utf-8");
UserSessionuser=WebUtil.getSessionUser(request);
for(MultipartFilefile:files){
StringfileName=file.getOriginalFilename();//获取文件名
}
UploadMessagemessage=newUploadMessage();
Mapmap1=newHashMap();
try{
Mapmap=this.multipleUpload(request,files);
};
protectedMapmultipleUpload(HttpServletRequestrequest,Listfiles)throwsIllegalStateException,IOException{
Mapmap=newHashMap();
for(MultipartFilefile:files){
if(file==null){
map.put("status",-1);
map.put("statusInfo","上传参数不能为空");
returnmap;
}
}
//创建一个通用的多部分解析器
CommonsMultipartResolvermultipartResolver=newCommonsMultipartResolver(request.getSession().getServletContext());
//判断request是否有文件上传,即多部分请求
if(multipartResolver.isMultipart(request)){
//转换成多部分request
MultipartHttpServletRequestmultiRequest=(MultipartHttpServletRequest)request;
Enumerationparams=multiRequest.getParameterNames();
StringupDir=null;
//获得formdata对象中自定义的一些属性,是枚举类型
while(params.hasMoreElements()){
Stringname=(String)params.nextElement();
upDir=multiRequest.getParameter("upDir");
}
//取得request中的所有文件名
Iteratoriter=multiRequest.getFileNames();
Listlist=newArrayList<>();
MultiValueMapmultiValueMap=multiRequest.getMultiFileMap();
ListfileList=multiValueMap.get("file");
for(MultipartFilefile:fileList){
//这里上传多张图片
StringBufferurl=newStringBuffer("");
Mapmap1=newHashMap<>();
if(file!=null){
//取得当前上传文件的文件名称
StringoriginalFilename=file.getOriginalFilename();
//如果名称不为“”,说明该文件存在，否则说明该文件不存在
if(originalFilename!=null&&originalFilename.trim()!=""){
Stringsuffix="";
if(originalFilename.indexOf(".")>-1){
suffix=originalFilename.substring(originalFilename.lastIndexOf("."),originalFilename.length());
}
if(notImageFormat(suffix)){
map.put("statusInfo",imageFomat);
returnmap;
}
if(isPassSize(file.getSize())){
map.put("stateInfo",imageSize);
returnmap;
}
//重命名上传后的文件名
StringfileName=idWorker.nextId()+suffix;
Stringdir=DateTimeUtil.formatDateTime("yy/MM/dd");
if(!StringUtils.isBlank(upDir)){
url.append("/").append(upDir);
}
url.append("/").append(dir).append("/");
//定义上传路径
Stringpath=ParamUtil.imageServiceRealPath+url;
//上传图片
imageUploadService.uploadImage(path,fileName,file.getInputStream());
StringallUrl=url+fileName;
map1.put("imagePath",url.toString());
map1.put("imageName",fileName);
map1.put("imageUrl",ParamUtil.imageServicePath+allUrl);
list.add(map1);
}
}
}
map.put("status",0);
map.put("statusInfo","success");
map.put("imgs",list);
}
returnmap;
}

具体上传的代码就需要自己来实现了,总之就是多文件上传后,也还是需要循环着来传的.

网上有挺多的关于formdata多文件上传的文章,但都写的比较零散,有的只写了前台,有的写得只是后台,有一篇写得比较详细,不过是php的,所以自己就整理了一篇java的,希望可以帮到需要帮助的人

Java Web使用Html5 FormData实现多文件上传功能

热门推荐

随机推荐