springmvc多文件上传并传参
后端代码:
@ApiOperation(value = "表单提交", notes = "")
@PostMapping(value = "/submit")
public Result<BssEnergizeCase> submit(
@RequestParam(value = "wordFile") MultipartFile wordFile,
@RequestParam(value = "imgFile") MultipartFile imgFile,
@Validated RequestBodyExample requestBodyExample
) throws IOException {
//业务代码
}
前端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.main {
border-radius: 30px;
width: 50%;
margin: 0 auto;
padding: 100px;
margin-top: 200px;
border: 1px solid #CCCCCC;
}
</style>
</head>
<body>
<div class="main">
<form class="form-horizontal" role="form" id="submit" method="post" enctype="multipart/form-data"
onsubmit="return false">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input name="name" type="text" class="form-control" id="name"
placeholder="请输入行业类别">
</div>
</div>
<div class="form-group">
<label for="hobby" class="col-sm-2 control-label">爱好</label>
<div class="col-sm-10">
<select id="hobby" name="hobby" class="form-control">
<option value="1">1 - 前端</option>
<option value="2">2 - 后端</option>
</select>
</div>
</div>
<div class="form-group">
<label for="summary" class="col-sm-2 control-label">自我介绍</label>
<div class="col-sm-10">
<textarea name="summary" style="height: 100px;" class="form-control" id="summary"
placeholder="文章内容概览，128字以内"></textarea>
</div>
</div>
<div class="form-group">
请选择头像照：
<input type="file" id="imgFile" name="imgFile">
</div>
<div class="form-group">
请选择简历：
<input class="file" type="file" id="wordFile" name="wordFile">
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button onclick="checkForm()" type="submit" class="btn btn-default">提交</button>
</div>
</div>
</form>
</div>
function checkForm() {
var formData = new FormData($("#submit")[0]);
$.ajax({
headers: {
"Authorization": "Bearer xxx"
},
url: "/submit",
type: 'POST',
data: formData,
cache: false,
async: false,
processData: false, //必须false才会避开jQuery对 formdata 的默认处理
contentType: false, //必须false才会自动加上正确的Content-Type
success: function (data) {
alert("提交成功");
},
error: function (data) {
alert("失败");
}
});
}
</body>
</html>
参考：https://blog.csdn.net/qq_41669724/article/details/80748952
注意：本文归作者所有，未经作者允许，不得转载