springmvc fileupload

1.pom文件中fileupload的dependencyyinr

<dependency>  
	<groupId>commons-fileupload</groupId>  
	<artifactId>commons-fileupload</artifactId>  
	<version>1.3.1</version>  
</dependency>

2.springmvc配置文件

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
	    <!-- 上传的最大限制 -->
	    <property name="maxUploadSize" value="209715200" />
	    <!-- 默认编码 -->
	    <property name="defaultEncoding" value="UTF-8" />
	    <!-- 上传文件的解析 -->
	    <property name="resolveLazily" value="true" />
</bean>

3.前台jsp

<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<html>
<head>

	<script type="text/javascript" src="<%=basePath%>/js/jquery.min.js"></script>
	<style type="text/css">
		#pic{
			200px;
			height:200px;
			/* border-radius:50% ; */
			margin:20px auto;
			cursor: pointer;
			}
	</style>

</head>
<c:import url="main.jsp"></c:import>
<body>
	<input id="serverPath" type="hidden" value="<%=basePath %>"/>
	<form enctype="multipart/form-data" id="uploadForm">
		<div>省:<input type="text" id="province"></div>
		<div>市:<input type="text" id="city"></div>
	    <img id="pic" src="<%=basePath%>/images/upload_img.png" >
		<input id="upload_file" name="upload_file" accept="image/*" type="file" style="display: none"/>
		<input type="button" id="uploadPicButton" value="上传" onclick="uploadPic()">
	</form>
</body>
</html>

4.js代码

var serverPath;

$(function() {
	serverPath = $("#serverPath").val();
	$("#pic").click(function () {
	$("#upload_file").click(); //隐藏了input:file样式后，点击头像就可以本地上传
	$("#upload_file").on("change",function(){
		var objUrl = getObjectURL(this.files[0]) ; //获取图片的路径，该路径不是图片在本地的路径
		if (objUrl) {
			$("#pic").attr("src", objUrl) ; //将图片路径存入src中，显示出图片
		}
	});
	});
});
 
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}

function uploadPic(){
    var pic = $('#upload_file')[0].files[0];
    var fd = new FormData();
    fd.append('file', pic);
    fd.append('province', $('#province').val());
    fd.append('city', $('#city').val());
    $.ajax({
        url:serverPath + "/bmdList/test",
        type:"post",
        // Form数据
        data: fd,
        cache: false,
        contentType: false,
        processData: false,
        success:function(data){
            alert(data);
        }
    });
                    
}

5.后台代码

@RequestMapping(value = "/test",method = RequestMethod.POST)
    @ResponseBody
    public String test(PhoneCardEntity entity) throws IOException{
    	System.out.println("省:"+entity.getProvince());
    	System.out.println("市:"+entity.getCity());
    	System.out.println(entity.getFile().getOriginalFilename());
    	byte[] bytes = entity.getFile().getBytes();
    	return "success";
    }

6.entity代码

private String province; // 省
private String city; // 市
private MultipartFile file;

----------------------------------------------------------------------------------华丽的分割线----------------------------------------------------------------------------------------

执行效果

1/ 页面初始化

2.选择图片及输入内容

3.点击上传后台输出log