前端:
用Ajax提交可以不要enctype="multipart/form-data" action="/add" method="POST"
<form enctype="multipart/form-data" action="/add" method="POST" id="kidkj">
商品名称:<input type="text" name="name" required><br>
商品图片:<input type="file" name="fileName" id="fileName" required><br>
<input type="submit" value="上传"><!--可以直接提交-->
<button type="button" id="tioo">提交</button><!--用于测试Ajax提交-->
jQuery:需要引入包
<script>
$(function () {
$("#tioo").click(function () {
//var formData = new FormData($("#kidkj")[0]);//引入表单方式
var name=$('[name="name"]').val();
var file = document.getElementById('fileName').files[0];
var fromdata = new FormData();
fromdata.append("fileName",file);//和后端名对应
fromdata.append("name",name);
$.ajax({
url: "/add",
type: "post",//用post,(get总是报400错误,不知为啥?之前是@GetMapping)
data: fromdata,
//data:fromData,
// dataType: "json",
cache: false,//上传文件无需缓存
processData: false,//用于对data参数进行序列化处理 这里必须false
contentType: false, //必须*/
async: false,
success:function (data){
alert("成功"+data);
},
error:function () {
alert("失败")
}
});
})
})
</script>
后端:Controller层
@PostMapping("/add")
@ResponseBody
public String add(
String name,
MultipartFile fileName){
String name1 = fileName.getOriginalFilename();//原始文件名 System.out.println(name+"====="+name1);
return "true";
}