关闭

【Java】SpringMVC实现多张图片上传实例

标签: SpringMVC实现多张图片上传实例java多张图片上传
3492人阅读 评论(7) 收藏 举报
分类:

实现在Springmvc中上传图片功能很好实现。需求是将多张或单张图片上传至某个文件夹下,同时保存在数据库中和服务器上。现在我将会展现完整例子。

1、前提:在pom中添加相关的jar包。

<!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.2</version>
</dependency>
2、SpringMVC 用的是 的MultipartFile来进行文件上传 所以我们首先要配置MultipartResolver:用于处理表单中的file。在applicationContext-mvc.xml中添加如下代码:


代码:

<bean id="multipartResolver"    
        class="org.springframework.web.multipart.commons.CommonsMultipartResolver">    
        <!-- set the max upload size10MB -->    
        <property name="maxUploadSize">    
            <value>10485760</value>    
        </property>    
        <property name="maxInMemorySize">    
            <value>4096</value>    
        </property>   
        <property name="defaultEncoding">  
            <value>utf-8</value>  
        </property>  
    </bean> 

3.  在上传按钮时js代码:

/**
 * 点击添加图片
 * 上传 多张图片
 * 原生写法
 * @param im
 * @returns
 */

function uploadimgforlist(im){
	var fileTid = $(".ant-checkbox-checked[name=imgsubcheckbox]").children().eq(0).val();//获取文件夹的id
    if(typeof(fileTid) != "undefined"){
    	var path = imgpathchange(im);
    	var file_name = $("input[name='fileImg']");
    	var addimg='<li>'
			            +'<div class="uploadimg position-rv" onmouseover="showBtnImg(this)" onmouseout="hideBtnImg(this)">'
				            +'<form id="formId" enctype="multipart/form-data" method="post">'//action="../../file/toUpLoadBacthHmImage.do?tid='+fileTid+'" 
				            +'</form>'
				           /*+    '<img  src="'+path+'">'
				            +    '<div id="" class="position-ab imghandle dpnone">'
				            +       '<i class="iconfont icon-download" onclick="downloadThisImage(this);"></i>'
				            +      '<i class="iconfont icon-delete pull-right deleteimgsigle" onclick="deleteimgsigle(this)"></i>'
				            +   '</div>'*/
			            +'</div>'
			         +'</li>';
        $("#imgshowlist").append(addimg);
        $("#formId").append(file_name);
        var options = {
	        url: '../../file/toUpLoadBacthHmImage.do',
	        type: "post",
	        dataType: 'json',
	        data:{tid:fileTid},
	        success:function(data){
	        	if(data.result == true){
	        		alert("上传成功");
	        		location.reload();
	        	}else {
	        		alert("上传失败");
				}
	        	 
	       },
	       error:function(data,msg){
	 			$.error("上传信息失败" + msg);
	 		}
	   }
      $("#formId").ajaxSubmit(options);
    }else {
		alert("请先选择文件夹,在进行添加图片!");
	}


}
4、实现上传功能的Controller类方法:

/**
	 * 多张图片上传(含单张)
	 * @param request
	 * @param response
	 * @param model
	 * @return
	 * @author zhangsq
	 */
	@RequestMapping("/toUpLoadBacthHmImage.do")
	public @ResponseBody Map<String, Object> toUpLoadBacthHmImage(HttpServletRequest request, 
			HttpServletResponse response,ModelMap model,String tid,
			@RequestParam("fileImg") MultipartFile[] multipartfiles) 
					throws IllegalStateException, IOException{
		Map<String, Object> map = new HashMap<String, Object>(); 
		HmFile fileBean = hmFileService.findByTidFilesInfo(tid);
		 /** 得到图片保存目录的真实路径 **/
		String realpath = properties.getProperty("file.acpath.server");
		/** 构建图片保存的目录 **/
		String filedir =File.separator
				+ SpellUtil.getFirstSpell(fileBean.getFileName());
		String filelocationdir = realpath + filedir;
		/** 根据真实路径创建目录 **/
		File logoSaveFile = new File(filelocationdir);
		if (!logoSaveFile.exists()){
			logoSaveFile.mkdirs();
		}
		 boolean doFlag;
		if(null != multipartfiles && multipartfiles.length > 0){  
			//MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;  
			//List<MultipartFile> iter = multiRequest.getFiles("file");
	        try {
		        for(MultipartFile picFile : multipartfiles){  
            	//MultipartFile picFile = multiRequest.getFile(iter.next());  
		        if(null != picFile && null != picFile.getOriginalFilename()
		                && !"".equals(picFile.getOriginalFilename().trim())
		                && !"null".equals(picFile.getOriginalFilename().trim())){
		            
		        	synchronized(HmFileImageController.this){
		        		String imagename = new SimpleDateFormat("yyyyMMddHHmmss")
		        				.format(new Date()).concat(picFile.getOriginalFilename());
		        		String filename = filelocationdir + File.separator +imagename;
		        		File file = new File(filename);
		        		
	        			picFile.transferTo(file);//上传至服务器
	        			//将文件图片插入数据库
	        			HmImage imgBean = new HmImage();
	        			imgBean.setTid(UUIDUtil.getUUID());
	        			imgBean.setHid(tid);
	        			
	        			long curTimeStamp = System.currentTimeMillis();
	                    String fileACPath = properties.getProperty("file.acpath.views.server"); 
	                    String spell = SpellUtil.getFirstSpell(fileBean.getFileName());
	                    fileACPath=String.format(fileACPath,spell,imagename,curTimeStamp);
	                    
	                    imgBean.setFilePath(fileACPath);
	        			//imgBean.setFilePath(fileACPath.replaceAll("/", "\\\\"));
	        			String tid_insert = hmImagesService.insertSelective(imgBean);//保存在数据库中
	        			hmFileService.updateByTidUpdateTimes(tid);//更新文件夹的时间
	        			map.put("tid_insert", tid_insert);
		        		
		        	}
		        }
            }
		        doFlag = true;
	        } catch (IllegalStateException e) {
				e.printStackTrace();
				doFlag = false;
			} catch (IOException e) {
				e.printStackTrace();
				doFlag = false;
			}
            //遍历并保存文件  
	        map.put("result", doFlag);
        }  
		return map;

	}
tid:是某个文件夹的id。该功能实现了多张图片上传,一是可以将图片保存在数据库(存储图片的路径),二是将图片存储在服务器上。

附上配置文路径文件:

file.acpath.server=/home/weihu/img_resource/school_web    <---- 服务器路径
file.acpath.views.server=http://www.zxctinfo.com:8080/school_web_img/%s/%s?t=%s      <---- 数据库路径

你也可以自定义该路径的。

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

java多图片上传功能的实现

开发环境:jdk1.7,MyEclipse10 框架用的是spring。用到了maven工具(maven的包百度下就可以)第一步、先在Spring中对图片进行限制 <bean id=...
  • nihaoa50
  • nihaoa50
  • 2017-03-06 16:34
  • 11312

java多图片上传基于maven的demo

  • 2017-05-07 23:46
  • 1.70MB
  • 下载

java一次多选的多图片异步上传

注:一般上传图片我们都会用input file 来上传,但是这个点击上传的时候只能每次选中一张图片,但是怎么做到点击的时候能同事选中多张呢?网上看了很多插件,有些是配置很繁琐,有的插件则是一张一张添加...
  • lzy295481710
  • lzy295481710
  • 2016-07-01 17:09
  • 6257

springmvc上传图片并显示图片--支持多图片上传

springmvc上传图片并显示图片(也能上传文件),多图片上传并显示图片,采用commons-fileupload,commons-io
  • zwz568017880
  • zwz568017880
  • 2015-07-13 21:44
  • 42195

java上传多张图片,并且可以删除上传的图片。

可以删除从库里查询出来的图片,也可以删除刚上传到图片,其实不多,为了任务请耐心看完: 效果如下: 1:最开始效果 2:点击上传图片,弹出本地上传,并有删除按钮: 3:点击删除,弹出删除...
  • xuanzhangran
  • xuanzhangran
  • 2017-02-08 17:45
  • 5126

简单多图片上传 jquery+java 代码

简单多图片上传 jquery+java 代码
  • liangrui1988
  • liangrui1988
  • 2015-08-13 19:32
  • 1477

java 多张图片上传

  • 2014-11-05 09:08
  • 5KB
  • 下载

java多文件上传plupload控件实现多图片上传(一)

plupload控件实现多图片上传,前台jsp页面控件配置和初始化。
  • nn2345
  • nn2345
  • 2016-01-05 14:46
  • 2527

java 多图片上传

  • 2013-09-09 13:01
  • 825KB
  • 下载

java多文件上传

自己遇到这样的东西 先大概写了一个模型 用的swfupload+struts 或者单独的 swfupload +serverlet  文件在程序中的位置具体如下: 必须的包:lib里面的包都是必须...
  • linlinv3
  • linlinv3
  • 2013-07-29 16:47
  • 18550
    个人资料
    • 访问:232216次
    • 积分:3046
    • 等级:
    • 排名:第13268名
    • 原创:111篇
    • 转载:43篇
    • 译文:0篇
    • 评论:63条
    最新评论