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

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

首先html页面定义有两种:

html1

<form enctype="multipart/form-data" id="formfile">
<input type="file" name="file"/>
</>

html2

<input type="file" multiple="multiple" accept="image/gif, image/jpeg, image/png, image/jpg, image/bmp" />

　项目中我采用了html2的方式

再看看上传的js部分吧:

$(document).on("change", ".upload-img input:file", function() {
 var fileid = $(this).attr("id");
 var t_files = this.files;
 var imglength = $("#view_" + fileid).parent().parent().find(".upload-img").length;
 if (imglength==1) {
  if (t_files.length > 5) {
  new message().showmsg("最多选择五张图片");
  return false;
  } else if (t_files.length < 1) {
  new message().showmsg("至少选择一张图片");
  return false;
  }
 }else if(t_files.length+imglength>6) {
  new message().showmsg('最多再选择'+ (6-parseint(imglength)) +'张图片');
  return false;
 }
 var data = new formdata();
 for (var i=0;i<t_files.length;i++){
  data.append('file',t_files[i]);
  data.append('randomcode',fileid+i);
  data.append('updir','comment')
 }
// for(var pair of data.entries()){
//  console.log(pair);
// }
// console.log(json.stringify(data));
 $.ajax({
  url : '${pagecontext.request.contextpath}/file/multiplecommentimageupload', //用于文件上传的服务器端请求地址
  type : 'post',
  processdata: false, // 告诉jquery不要去处理发送的数据
  contenttype: false, // 告诉jquery不要去设置content-type请求头
  data:data,
  cache: false
 }).done(function(data,status){
  var dataobj = jquery.parsejson(data);
  if(dataobj.state == -1){
  new message().showmsg("上传图片出错");
  }else{
  var imgs = dataobj.imgs;
  for (var i=0;i<imgs.length;i++) {
   var imgurl = imgs[i].imageurl;
   var imglength = $("#view_" + fileid).parent().parent().find(".upload-img").length
   if ( imglength < 5) {
   $("#view_" + fileid).parent().after('<div class="upload-img"><img src="' + imgurl + '" alt="" class="upload_left" rotation-num="0"/></div>');
   $("#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来说可以使用 var data = new formdata(document.getelementbyid("#formfile");两种创建方式基本没有区别;第22-23行是可以给formdata添加其他属性的,,按需选择,21行是添加文件必须要写的.ajax部分 32 33行是必须要设置的,网上有说明,我就不多说了;

java代码部分:

public void multiplecommentimageupload(httpservletrequest request, httpservletresponse response, @requestparam(value = "file", required = false)list<multipartfile> files) {
 response.setcontenttype("text/html;charset=utf-8");
 usersession user = webutil.getsessionuser(request);
 for (multipartfile file:files) {
  string filename = file.getoriginalfilename(); //获取文件名
 }
 uploadmessage message = new uploadmessage();
 map map1 = new hashmap();
 try {
  map<string,object> map = this.multipleupload(request, files);
  };
 protected map<string,object> multipleupload(httpservletrequest request, list<multipartfile> files) throws illegalstateexception, ioexception {
 map<string,object> map =new hashmap();
 for(multipartfile file:files) {
  if (file == null) {
  map.put("status",-1);
  map.put("statusinfo","上传参数不能为空");
  return map;
  }
 }
 //创建一个通用的多部分解析器
 commonsmultipartresolver multipartresolver = new commonsmultipartresolver(request.getsession().getservletcontext());
 //判断 request 是否有文件上传,即多部分请求
 if (multipartresolver.ismultipart(request)) {
  //转换成多部分request
  multiparthttpservletrequest multirequest = (multiparthttpservletrequest) request;
  enumeration params = multirequest.getparameternames();
  string updir = null;
　　　　　　　　//获得formdata对象中自定义的一些属性,是枚举类型
  while (params.hasmoreelements()) {
  string name = (string)params.nextelement();
  updir = multirequest.getparameter("updir");
  }
  //取得request中的所有文件名
  iterator<string> iter = multirequest.getfilenames();
  list<map> list = new arraylist<>();
  multivaluemap<string, multipartfile> multivaluemap = multirequest.getmultifilemap();
  list<multipartfile> filelist = multivaluemap.get("file");
  for (multipartfile file:filelist){
  //这里上传多张图片
  stringbuffer url = new stringbuffer("");
  map<string,string> map1 = new hashmap<>();
  if (file != null) {
   //取得当前上传文件的文件名称
   string originalfilename = file.getoriginalfilename();
   //如果名称不为“”,说明该文件存在，否则说明该文件不存在
   if (originalfilename != null && originalfilename.trim() != "") {
   string suffix = "";
   if (originalfilename.indexof(".") > -1) {
    suffix = originalfilename.substring(originalfilename.lastindexof("."), originalfilename.length());
   }
   if (notimageformat(suffix)) {
    map.put("statusinfo",imagefomat);
    return map;
   }
   if (ispasssize(file.getsize())) {
    map.put("stateinfo",imagesize);
    return map;
   }
   //重命名上传后的文件名
   string filename = idworker.nextid() + suffix;
   string dir = datetimeutil.formatdatetime("yy/mm/dd");
   if (!stringutils.isblank(updir)){
    url.append("/").append( updir);
   }
   url.append("/").append(dir).append("/");
   //定义上传路径
   string path = paramutil.imageservicerealpath + url;
   //上传图片
   imageuploadservice.uploadimage(path, filename, file.getinputstream());
   string allurl = 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);
 }
 return map;
 }

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

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