后台
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.6</version>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.4</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
</dependency>
<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
</dependency>
- 2 配置application.properties 文件
server.port=8088
spring.servlet.multipart.max-file-size=100MB
spring.servlet.multipart.enabled=true
#文件上传临时目录
spring.servlet.multipart.location=D:/Idea/uploadfiles
spring.mvc.view.prefix=/
spring.mvc.view.suffix=.jsp
#开启热布署
server.servlet.jsp.init-parameters.development=true
<insert id="register" useGeneratedKeys="true" keyProperty="id">
insert into t_user (name,password,sex,birthDay,photo) values(#{name},
#{password},#{sex},#{birthDay},#{photo})
</insert>
@Transactional(propagation = Propagation.REQUIRED,readOnly = false)
@Override
public void registerUser(User user) {
userDAO.register(user);
}
@PostMapping(value = "/user")
public User registerUser(@RequestPart(value = "user",required = false) User user,@RequestParam("multipartFile") MultipartFile multipartFile){
System.out.println(multipartFile.getOriginalFilename());
userService.registerUser(user);
return user;
}
前台
<%@page pageEncoding="UTF-8" isELIgnored="false" contentType="text/html;Utf-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
<html>
<head>
<meta charset="utf-8">
<title>restbody ajax</title>
<script src="${pageContext.request.contextPath}/static/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/static/jquery.extend.js"></script>
<script>
$(function () {
//imgShow :自定义插件
$("#rest_register_form input[type = 'file']").imgShow({
imageId: "photoId"
})
$("#rest_register_btn").click(function () {
var formData = new FormData();
var file = $("#rest_register_form input[type = 'file']")[0].files[0];
//serializeForm2JSON:自定义的插件库
var user = $("#rest_register_form").serializeForm2JSON();
formData.append("multipartFile",file);
console.log(user)
formData.append("user", new Blob([user],{type: "application/json"}));
$.ajax({
url: "${pageContext.request.contextPath}/UserManager/user",
type: "post",
contentType: false,//忽略contentType
processData: false,//取消序列换 formData本来就是序列化好的
dataType: "json",
data: formData,
success: function (data) {
alert("提交成功");
},
error: function () {
alert("出错了!")
}
});
});
})
</script>
</head>
<body>
<form id="rest_register_form">
<table style="text-align: center;" border="1" cellpadding="0" cellspacing="0">
<thead>
<tr>
<td>标题</td><td>控件</td><td>图片</td>
</tr>
</thead>
<tbody>
<tr>
<td>用户名</td><td><input name="name" type="text"></td>
<td rowspan="3"><img id="photoId" width="50" alt="头像"/></td>
</tr>
<tr>
<td>密 码</td><td><input name="password" type="password"></td>
</tr>
<tr>
<td>头 像</td><td><input type="file" name="multipartFile"></td>
</tr>
</tbody>
</table>
<tfoot>
<tr>
<td colspan="3">
<a id="rest_register_btn" href="javascript:void(0)">提 交</a>
</td>
</tr>
</tfoot>
</form>
<a href="${pageContext.request.contextPath}/views/RequestBody.jsp">back</a>
</body>
</html>
$.fn.extend({
serializeForm2JSON:function () {
if(this.length>1){
alert("你只能用ID选择器,选择唯一一个表单元素")
return
}
var input = $(this[0]).serializeArray();
var map={};
input.forEach(function (item,index) {
if (map[item.name]) {
if (!map[item.name].push) {
map[item.name] = [map[item.name]];
}
map[item.name].push(item.value || '');
}else {
map[item.name] = item.value || '';
}
});
return JSON.stringify(map);
},
imgShow:function (options) {
$(this).change(function () {
for (var i = 0; i < event.target.files.length; i++) {
var file = event.target.files.item(i);
if (!(/^image\/.*$/i.test(file.type))) {
continue;
}
var freader = new FileReader();
freader.readAsDataURL(file);
freader.onload = function (e) {
console.log(e.target.result);
$("#"+options.imageId).attr("src", e.target.result);
}
}
})
}
})