基于SpringMVC的批量上传图片

最新推荐文章于 2024-08-01 20:00:37 发布

加贝2131

最新推荐文章于 2024-08-01 20:00:37 发布

阅读量1.1k

点赞数

分类专栏：批量上传图片文章标签： Java 批量上传图片上传图片

本文链接：https://blog.csdn.net/u010843886/article/details/80629158

版权

批量上传图片专栏收录该内容

1 篇文章 0 订阅

订阅专栏

对于大量的文件上传问题来说，单个上传文件耗时耗力，批量上传则符合用户需求。

在实际的业务中，批量上传图片前后需要处理的逻辑特别多，但批量上传图片的功能则是一个重要的技术点，自己研究了半天才将其功能添加进项目里，在此将自己做的Demo记录下来用以以后方便查找。

先上图：

其实Demo很简单，前端采用的是layui的upload控件，

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%
String path = request.getContextPath();   
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<head>
<base href="<%=basePath %>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=10,IE=9,IE=8,IE=7,IE=6,chrome=1">
<link rel="stylesheet" href="<%=basePath%>js/layui/css/layui.css"  media="all">
<title></title>
</head>
<body style=" background-color:white;margin-left: 10px;margin-right: 10px;margin-top: 10px;overflow-y:hidden" >
<!------------------------------------------------当前业务模块--------------------------------------->
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
	  <legend>上传多张图片</legend>
	</fieldset>
	 
	<div class="layui-upload">
	  <button type="button" class="layui-btn" id="test2">多图片上传</button> 
	  <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
	    预览图：
	    <div class="layui-upload-list" id="demo2"></div>
	 </blockquote>
	</div>
	
<!------------------------------------------------当前业务模块--------------------------------------->	

<script type="text/javascript" src="<%=basePath%>js/jquery-1.11.3.js"></script>
<script type="text/javascript">
var global={
		basePath:"<%=basePath%>"
		};
</script>
<script type="text/javascript" src="<%=basePath%>js/uploadImg.js"></script>
<script type="text/javascript" src="<%=basePath%>js/layui/layui.js" charset="utf-8"></script>


</body>
</html>

js代码：

$().ready(function(){
 	layui.use('upload', function(){
 	  var $ = layui.jquery,upload = layui.upload;
 	  //多图片上传
 	  upload.render({
 	    elem: '#test2'
 	    ,url: global.basePath + "upload"
 	    ,multiple: true
 	    ,before: function(obj){
 	      //预读本地文件示例，不支持ie8
 	      obj.preview(function(index, file, result){
 	        $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
 	      });
 	    }
 	    ,allDone: function(obj){ //当文件全部被提交后，才触发
 		    console.log(obj.total); //得到总文件数
 		    console.log(obj.successful); //请求成功的文件数
 		    console.log(obj.aborted); //请求失败的文件数
 		  }
 		 ,error: function(index, upload){
 		    //当上传失败时，你可以生成一个“重新上传”的按钮，点击该按钮时，执行 upload() 方法即可实现重新上传
 		    console.log("上传失败！");
 		  }
 	    ,done: function(res){
 	      //上传完毕
 	    }
 	  });
 	  });
});

后端则只要接受前端传来的图片资源进行遍历存储到指定的文件夹即可

@Controller
public class UploadPhotoController {


	@ResponseBody
	@RequestMapping(value = "/upload",method=RequestMethod.POST)
	public String upload(HttpServletRequest request, HttpServletResponse response) throws IllegalStateException, IOException{
		
		ReturnDataForJSON returnJson=new ReturnDataForJSON();
		// 将request变成多部分request
		MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
		// 获取multiRequest中所有的文件名
		Iterator<String> iter = multiRequest.getFileNames();
		// 将图片名放到list集合里面，
		List<String> list = new ArrayList<String>();
		// 遍历所有文件名
		while (iter.hasNext()) {
			// 按文件名从multiRequest找到对应文件
			MultipartFile file= multiRequest.getFile(iter.next());
			// 实际的文件名
			String fileName= file.getOriginalFilename();
			//将实际的图片名放到集合中
			list.add(fileName);
			String uri = request.getSession().getServletContext().getRealPath("/") +"image/"+ fileName;
			File uploadSaveFile = new File(uri);
			judeDirExists(uploadSaveFile);
			// 将该文件存放至指定目录
			file.transferTo(uploadSaveFile);
		}
		System.out.println(list.toString());
		// 将list集合 转换成字符串并以，分割
		String pitruename = StringUtils.join(list, ',');
		System.out.println("图片名： "+pitruename);
		returnJson = CommonUtil.returnSuccess(pitruename);	
		return JSONArray.toJSONString(returnJson,SerializerFeature.WriteNullNumberAsZero);
	}
		//判断文件夹是否存在，不存在则创建
	    public void judeDirExists(File file) {
	       if (!file.exists()) {
	    	   file.mkdirs();
	       }
	    }
}

多图片上传的主要代码已经贴出，是不是发现其实特别简单。

如果还不明白，可以下载我自己写的小Demo:批量上传图片