jQuery+SpringBoot实现简单文件上传功能
<!DOCTYPE html>
<html>
<head>
<title>文件上传</title>
<script src='https://code.jquery.com/jquery-3.5.1.min.js'></script>
</head>
<body>
<form enctype='multipart/form-data'>
<label for='file'>选择文件：</label>
<input type='file' name='file' id='file'>
<input type='button' value='上传' id='uploadBtn'>
</form>
<script>
$(document).ready(function() {
$('#uploadBtn').click(function() {
var formData = new FormData();
formData.append('file', $('input[type=file]')[0].files[0]);
$.ajax({
url: '/upload',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(data) {
alert('上传成功！');
},
error: function() {
alert('上传失败！');
}
});
});
});
</script>
</body>
</html>
<pre><code>
后端代码：
</code></pre>
<p>@RestController
public class FileUploadController {</p>
<pre><code>@PostMapping("/upload")
public String upload(@RequestParam("file") MultipartFile file) {
try {
// 保存文件
String fileName = file.getOriginalFilename();
String filePath = "D:/upload/";
File dest = new File(filePath + fileName);
file.transferTo(dest);
return "上传成功！";
} catch (IOException e) {
e.printStackTrace();
return "上传失败！";
}
}
</code></pre>
<p>}</p>
<pre><code>
注意事项：
1. 前端需要使用FormData对象来构建表单数据，用于文件上传。
2. 后端需要使用@RequestParam注解来获取上传的文件。
</code></pre>
原文地址: https://www.cveoy.top/t/topic/nPNM 著作权归作者所有。请勿转载和采集!