java图片上传（1）-----使用springmvc的文件上传功能

图片上传功能很多地方都有用到，最典型的就是上传头像，上传身份证什么的。

本篇博客介绍springmvc框架上面org.springframework.web.multipart.commons.CommonsMultipartResolver的上传文件功能（使用ajax提交，本篇不介绍压缩，可能的话也是后端压缩）：

1、首先pom文件要导入一些jar包

<!-- 上传组件包 -->
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3.1</version>
        </dependency>
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.4</version>
        </dependency>
        <dependency>
            <groupId>commons-codec</groupId>
            <artifactId>commons-codec</artifactId>
            <version>1.9</version>
        </dependency>

 

2、要确定springmvc中配置了这个功能（图片上传其实就是文件上传）

3、然后我们来写前端代码：

元素（一个隐藏域是用来保存后端返回的服务器上面图片路径。比如：/images/123213213.jpg）：

重点：form表单上enctype="multipart/form-data"一定要加

<form method="post" id="signupForm" enctype="multipart/form-data">
　　<input type="file" id="img" name="img"/>
　　<img id="picture" style="width:400px;height:400px;display:none" />
　　<input type="hidden" name="headImg" id="headImg"/>
</form>

js代码如下：

因为是ajax提交的，所以要导入<script type="text/javascript" src="../sources/js/jquery.form.js"></script>插件。

<script>
$(function(){
	var prefixUrl="localhost:8081";
	
	$("#img").change(function(){
            upload(prefixUrl)
	})
})

function upload(prefixUrl){
	var options={
			type:"post",
			url:"http://"+prefixUrl+"/uploadImg",
			dataType:"json",
			cache:false,
			success:function(data){
				$("#picture").attr("src","http://"+data.webUrl)
				$("#picture").show()
				$("#headImg").val(data.path)
			}
	}
	$("#signupForm").ajaxSubmit(options)
}
</script>            

　4、controller代码：

@RequestMapping(value="/uploadImg",method={RequestMethod.POST})
	public @ResponseBody String uploadImg(HttpServletRequest request,@RequestParam(value="img") MultipartFile pic){
//		String username=request.getParameter("username");
//		Integer count=userService.insert(username, password);
		//获取图片原始文件名
		String originalFileName=pic.getOriginalFilename();
		String name=""+System.currentTimeMillis();
		//获取后缀
		String extension=originalFileName.substring(
				originalFileName.lastIndexOf("."), originalFileName.length());
		//相对路径
		String path="/WEB-INF/sources/upload/"+name+extension;
		//绝对路径
		String url=request.getSession().getServletContext().getRealPath("")+path;
		//网站路径
		String webUrl=request.getRequestURL()+path;
		webUrl=webUrl.replaceAll("http://", "").replaceAll("/uploadImg/WEB-INF", "");
		webUrl="{\"webUrl\":\""+webUrl+"\",\"path\":\"/sources/upload/"+name+extension+"\"}";
		File dir=new File(url);
		if(!dir.exists()){
		　　dir.mkdirs();
		}
		//上传图片
		try {
			pic.transferTo(new File(url));
		} catch (IllegalStateException | IOException e) {
			e.printStackTrace();
		}
		return webUrl;
	}

　结果：