前一阵子,迭代一个线上的项目,其中有一个图片上传的功能,之前用的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的,希望可以帮到需要帮助的人

# java  # web  # 多文件上传  # html5  # formdata  # SpringBoot处理form-data表单接收对象数组的方法  # 使用FormData上传二进制文件、对象、对象数组方式  # 文件上传  # 上传  # 最多  # 要去  # 有两种  # 写得  # 来实现  # 该文件  # 上传图片  # 的人  # 我就  # 是在  # 说了  # 两种  # 不多  # 网上  # 不过是  # 可以通过  # 采用了  # 不存在 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 网站制作企业,网站的banner和导航栏是指什么？  laravel服务容器和依赖注入怎么理解_laravel服务容器与依赖注入解析  如何将凡科建站内容保存为本地文件？  免费网站制作appp,免费制作app哪个平台好？  如何快速搭建FTP站点实现文件共享？  Laravel中Service Container是做什么的_Laravel服务容器与依赖注入核心概念解析  详解Oracle修改字段类型方法总结  如何在橙子建站上传落地页？操作指南详解  Laravel怎么集成Log日志记录_Laravel单文件与每日日志配置及自定义通道【详解】  Windows家庭版如何开启组策略(gpedit.msc)？（安装方法）  高端建站三要素：定制模板、企业官网与响应式设计优化  Laravel路由Route怎么设置_Laravel基础路由定义与参数传递规则【详解】  如何在建站宝盒中设置产品搜索功能？  如何在搬瓦工VPS快速搭建网站？  Laravel Vite是做什么的_Laravel前端资源打包工具Vite配置与使用  如何生成腾讯云建站专用兑换码？  Laravel项目如何进行性能优化_Laravel应用性能分析与优化技巧大全  如何用ChatGPT准备面试 模拟面试问答与职场话术练习教程  Laravel如何使用Seeder填充数据_Laravel模型工厂Factory批量生成测试数据【方法】  微信推文制作网站有哪些,怎么做微信推文，急？  微信小程序 scroll-view组件实现列表页实例代码  详解免费开源的.NET多类型文件解压缩组件SharpZipLib（.NET组件介绍之七）  Android okhttputils现在进度显示实例代码  Laravel怎么使用artisan命令缓存配置和视图  高端云建站费用究竟需要多少预算？  大连网站制作公司哪家好一点,大连买房网站哪个好？  浏览器如何快速切换搜索引擎_在地址栏使用不同搜索引擎【搜索】  Laravel如何实现图片防盗链功能_Laravel中间件验证Referer来源请求【方案】  微信小程序 wx.uploadFile无法上传解决办法  Laravel的.env文件有什么用_Laravel环境变量配置与管理详解  Android自定义listview布局实现上拉加载下拉刷新功能  如何在HTML表单中获取用户输入并用JavaScript动态控制复利计算循环  UC浏览器如何切换小说阅读源_UC浏览器阅读源切换【方法】  免费的流程图制作网站有哪些,2025年教师初级职称申报网上流程？  ,网页ppt怎么弄成自己的ppt？  香港服务器如何优化才能显著提升网站加载速度？  如何在云主机快速搭建网站站点？  Java垃圾回收器的方法和原理总结  浅谈redis在项目中的应用  Java类加载基本过程详细介绍  node.js报错：Cannot find module 'ejs'的解决办法  Laravel如何设置定时任务（Cron Job）_Laravel调度器与任务计划配置  利用python获取某年中每个月的第一天和最后一天  Laravel Artisan命令怎么自定义_创建自己的Laravel命令行工具完全指南  夸克浏览器网页跳转延迟怎么办 夸克浏览器跳转优化  JavaScript如何实现倒计时_时间函数如何精确控制  Laravel如何配置任务调度？（Cron Job示例）  Laravel怎么设置路由分组Prefix_Laravel多级路由嵌套与命名空间隔离【步骤】  利用vue写todolist单页应用  Laravel如何安装Breeze扩展包_Laravel用户注册登录功能快速实现【流程】