引言
SpringMVC 的文件上传特性是对原生文件上传繁琐的 I/O 流进行封装,目的是简化文件上传操作
SpringMVC 文件上传步骤
添加 springmvc 文件上传配置
在 SpringMVC 配置文件中添加如下配置:
<!-- 配置文件上传 -->
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!--设置字符集编码方式 -->
<property name="defaultEncoding" value="utf-8"></property>
<!--设置上传文件最大值(单位字节) -->
<property name="maxUploadSize" value="10485760000"></property>
<!--设置上传文件的缓存区最大值 -->
<property name="maxInMemorySize" value="40960"></property>
</bean>
SpringMVC 接收和处理上传文件
SpringMVC 会将上传的文件绑定到 MultipartFile 对象中,该对象提供了获取上传文件内容、文件名等方法
代码如下:
@RestController
public
class UploadFileController {
@RequestMapping("file")
public String uploadfile(MultipartFile file) throws IOException {
if (!file.isEmpty()) {
//获取上传文件名
String filename = file.getOriginalFilename();
//将上传的文件保存到磁盘中
file.transferTo(new File("C:/" +File.separator+filename));
return "success";
} else {
return "fail";
}
}
}
前端 ajax 上传文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax上传文件</title>
<script src="jquery.js"></script>
<script>
$(function(){
//绑定点击按钮事件
$("#btn").click(function () {
//创建表单数据对象(用于存储表单数据)
var formData = new FormData();
//获取表单文件对象
var file = $("#file")[0].files[0];
//将表单文件对象添加到表单数据对象中
formData.append('file',file);
$.ajax({
url:"file",
type:"POST",
data:formData,
processData:false,
contentType:false,
success:function (data) {
alert(data)
}
})
});
})
</script>
</head>
<body>
<form action="#" method="post">
<input type="file" name="file" id="file" /><br />
<input type="button" name="btn" id="btn" value="上传" />
</form>
</body>
</html>
HTML5 提供了一个新的 FormData 对象,它可以模仿 form 表单存储数据,将 form 表单元素的 name 与 value 进行组合,实现表单数据的序列化,从而减少表单元素的拼接,提高工作效率。
- append(key,value)方法: 在数据末尾追加数据
//通过FormData构造函数创建一个空对象
var formdata=new FormData();
//通过append()方法在末尾追加 key 为 name,value 值为 ”张三“ 的数据
formdata.append("name","张三");
FormData 对象也可以使用表单来添加数据
//表单
<form id="myForm" action="" method="post">
<input type="text" name="name">名字
<input type="password" name="psw">密码
<input type="submit" value="提交">
</form>
// 获取页面已有的一个form表单
var form = $("#id");
// 用表单来初始化
var formData = new FormData(form);
// 我们可以根据name来访问表单中的字段
var name = formData.get("name"); // 获取名字
var psw = formData.get("psw"); // 获取密码
// 当然也可以在此基础上,添加其他数据
formData.append("id","1111111");