目录
简介
正常使用jquery上传附件时data传到后端的数据只能是一个对象,
而图片在数据库和bean里面都是存的字符串类型,但是后端接收的是一个文件类型,
这样就上传不到后端,为了解决这个问题,我们就使用 FormData 对象来上传附件
解决方法
配置Spring文件
不配置这个就上传不了文件,一定要配置
<!-- 配置multipartResolver,用于上传文件,使用spring的CommonsMultipartResolver -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxInMemorySize" value="5000000"></property>
<property name="defaultEncoding" value="UTF-8"></property>
</bean>
HTML-form表单代码
enctype="multipart/form-data"一定要添加,要不上传不了附件
要上传的地方的input的type属性要改为file来上传文件,并且name属性要改的和bean不一样
<form action="/student/add" method="post" id="addForm" enctype="multipart/form-data">
姓名:<input type="text" name="name"><br>
家庭住址:<input type="text" name="bigname"><br>
出生日期:<input type="text" name="riqi"><br>
班级:<select name="gradeId">
<option value="0">请选择</option>
<option value="1">一年级</option>
<option value="2">二年级</option>
<option value="3">三年级</option>
</select><br>
年龄:<input type="text" name="age"><br>
图片:<input type="file" id="tupianURL" name="tupianURL"><br>
<input type="submit" value="添加">
</form>
jquery代码
创建 FormDate 对象来把数据上传到后端,要指定一个form,会获取到form中的数据
切记ajax中 processData: false和contentType: false 一定要记得添加,不添加的话会跳转页面
$("#addForm").submit(function (){
var formData = new FormData(document.getElementById("addForm"));
$.ajax({
url:"/student/add",
type:"post",
data:formData,
dataType:"json",
processData: false,
contentType: false,
success:function (data){
if (data>=1){
alert("添加成功");
}else {
alert("添加失败");
}
}
})
return false;
})
Controller后端代码
要确保webapp中创建的有这个路径
@RequestMapping("/add")
@ResponseBody
public String add(Student student,MultipartFile tupianURL,HttpServletRequest request){
if (tupianURL.getSize()>0) {//判断上没上传文件
String fileType=tupianURL.getOriginalFilename();
int index=fileType.lastIndexOf(".");
fileType=fileType.substring(index);
String path=request.getSession().getServletContext().getRealPath("static"+ File.separator+"uploadfiles");
long filename=System.currentTimeMillis();//获取当前时间时间戳
File file=new File(path+"\\"+filename+fileType);
try {
tupianURL.transferTo(file);
} catch (IOException e) {
e.printStackTrace();
}
student.setTupian(filename+fileType);
}
int count=studentService.addStudent(student);
String result=JSON.toJSONString(count);
return result;
}
以上工作作完就可以使用ajax方式上传附件啦!