首先需要在spring-mvc.xml配置 multipartResolver,这个不要随意改动
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="104857600"/>
<property name="maxInMemorySize" value="40960"/>
<property name="defaultEncoding" value="UTF-8"/>
</bean>
然后在pom.xml里加
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.2.1</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.0.1</version>
</dependency>
千万注意,不要以为代码写了,包就能下来,要查看本地是否真的存在,并且要看编译后的对应位置是否有,此处很坑!
我用idea,需要这么操作,把本地项目包放到编译后的位置,
配置就到这里,接下来是代码:
前台点击提交,触发btnTest事件,我获取的图片信息是base64,需要转正文件对象,工具在此
function dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime });
};
然后把file对象同其他数据一同放到ForData里传到后台,需要注意
-
contentType:false,//告诉jQuery不要去设置请求头
-
processData:false,//告诉spring不要去处理发送的数据
$("#btnTest").click(function() {
var data1 = new FormData();
$(".lookimg img").each(function (i, file) {
data1.append('file', dataURLtoFile(file.src,"13123.png"));
});
var pattern = /0?(13|14|15|18|17)[0-9]{9}/,
phone = $('#phone').val();
var chinse = /[\u4e00-\u9fa5]/,
name = $('#name').val();
declaration = $('#declaration').val();
if (pattern.test(phone) == true && chinse.test(name) == true && chinse.test(declaration) == true && pic1 != null || pic1 != "") {
;
$("#btnTest").removeAttr("onclick");
var name = $("#name").val();
var declaration = $("#declaration").val();
var phone = $("#phone").val();
//调用
data1.append("name",name);
data1.append("declaration",declaration);
data1.append("phone",phone);
$.ajax({
url:'../vote/player',
data:data1,
type:"post",
contentType:false,
processData: false,
success:function(result){
alert("报名成功");
console.log();
window.location.href = "../vote/activity";
},
error:function(result){
alert("报名失败");
}
})
}else{
alert("格式填写不正确");
}
})
后台接收:其他数据正常接收,文件需要处理一下
处理file,多文件用getFiles,单个用getFile
ok!