快捷導(dǎo)航

Java Web使用Html5 FormData實現(xiàn)多文件上傳功能

更新時間：2017年07月13日 11:12:03 作者：陳無問

這篇文章主要介紹了Java Web使用Html5 FormData實現(xiàn)多文件上傳功能,需要的朋友可以參考下

前一陣子,迭代一個線上的項目,其中有一個圖片上傳的功能,之前用的ajaxfileupload.js來實現(xiàn)上傳的,不過由于ajaxfileupload.js,默認(rèn)是單文件上傳(雖然可以通過修改源碼的方法來實現(xiàn)多文件上傳),又加上是在移動端做的,所以就打算采用html5的FormData實現(xiàn)多文件上傳

首先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', //用于文件上傳的服務(wù)器端請求地址
  type : 'post',
  processData: false, // 告訴jQuery不要去處理發(fā)送的數(shù)據(jù)
  contentType: false, // 告訴jQuery不要去設(shè)置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對象,其有兩種創(chuàng)建方法,對于使用html2來說使用該方式來創(chuàng)建,使用html1來說可以使用 var data = new FormData(document.getElementById("#formfile");兩種創(chuàng)建方式基本沒有區(qū)別;第22-23行是可以給formdata添加其他屬性的,,按需選擇,21行是添加文件必須要寫的.ajax部分 32 33行是必須要設(shè)置的,網(wǎng)上有說明,我就不多說了;

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","上傳參數(shù)不能為空");
  return map;
  }
 }
 //創(chuàng)建一個通用的多部分解析器
 CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
 //判斷 request 是否有文件上傳,即多部分請求
 if (multipartResolver.isMultipart(request)) {
  //轉(zhuǎn)換成多部分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) {
   //取得當(dāng)前上傳文件的文件名稱
   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;
 }

具體上傳的代碼就需要自己來實現(xiàn)了,總之就是多文件上傳后,也還是需要循環(huán)著來傳的.

網(wǎng)上有挺多的關(guān)于formdata多文件上傳的文章,但都寫的比較零散,有的只寫了前臺,有的寫得只是后臺,有一篇寫得比較詳細(xì),不過是php的,所以自己就整理了一篇java的,希望可以幫到需要幫助的人

您可能感興趣的文章: