前端代码
<body>
<input id="uploadInput" type="file" multiple="multiple" style="display: none;">
<!-- multiple属性是multiple才能选择多个文件 -->
<button onclick="upload()">
上传文件
</button>
</body>
<script>
let savePath = "/";
function upload() {
$("#uploadInput").click();
$("#uploadInput").on('change', () => { // 选择文件完成自动提交
var formData = new FormData()
var files = $("#uploadInput")[0].files // jquery选择后选中第一个元素
console.log(files)
for(let i = 0; i < files.length; i++){
formData.append("file", files.item(i)); // 向相同键添加可叠加文件
}
formData.append("savePath", savePath); // 添加其他参数
$.ajax({
url: "http://localhost:8001/upload",
type: "post",
data: formData,
dataType: 'json',
processData: false, // processData和contentType必须是false
contentType: false,
async: true
}).then(res => {
if (res.code == 200) {
alert("上传成功");
} else {
alert("上传失败");
}
})
})
}
</script>后端controller层
@PostMapping("/upload")
public String upload(@RequestParam(value = "file")List<MultipartFile> files, @RequestParam String savePath){
// 后端做文件处理
return "";
}结果
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
