示例效果:
前端代码:
<html>
<head><title>上传文件示例</title></head>
<body>
<h2>方式一:普通表单上传</h2>
<form action="/admin/upload" method="post" enctype="multipart/form-data"><input type="file" name="file"/><input type="submit" value="文件上传"/>
</form>
<h2>方式二:fetch异步上传</h2>
<input type="file" id="fileInput"/>
<script type="text/javascript">const fileInput = document.getElementById('fileInput');// 当文件被选中时上传文件fileInput.addEventListener('change', function (e) {const file = e.target.files[0];const formData = new FormData();formData.append('file', file);fetch('/admin/upload', {method: 'POST',body: formData}).then(response => response.json()) // 如果API返回JSON,解析它.then(data => {document.getElementById('fileInput').value = "";alert(JSON.stringify(data));}) // 处理解析后的数据.catch(error => console.error('Error:', error)); // 处理错误});
</script>
<h2>方式三:文件和文本一起提交</h2>
<input type="text" id="text"><br/>
<input type="file" id="file"/>
<input type="button" value="提交" onclick="submitForm()">
<script type="text/javascript">function submitForm() {const text = document.getElementById('text').value;const file = document.getElementById('file').files[0];const formData = new FormData();formData.append('text', text);formData.append('file', file);fetch('/admin/upload', {method: 'POST',body: formData}).then(response => response.json()).then(data => {alert(JSON.stringify(data));});}
</script>
</body>
</html>
后台代码
@RequestMapping(value = "/upload", method = RequestMethod.POST)@ResponseBodypublic String upload(@RequestParam("file") MultipartFile file, @RequestParam(value = "text", required = false) String text) {//文件保存路径为在D盘下的upload文件夹,可以按照自己的习惯修改String FILE_UPLOAD_PATH = "D:\\upload\\";//如果目录不存在,则创建目录Path path = Paths.get(FILE_UPLOAD_PATH);if (!Files.exists(path)) {try {Files.createDirectories(path);} catch (IOException e) {e.printStackTrace();}}if (file.isEmpty()) {return "文件上传失败";}String fileName = file.getOriginalFilename();String suffixName = fileName.substring(fileName.lastIndexOf("."));//生成文件名称通用方法SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd_HHmmss");Random r = new Random();StringBuilder tempName = new StringBuilder();tempName.append(sdf.format(new Date())).append(r.nextInt(100)).append(suffixName);String newFileName = tempName.toString();try {//保存文件byte[] bytes = file.getBytes();Path filePath = Paths.get(FILE_UPLOAD_PATH + newFileName);Files.write(filePath, bytes);} catch (IOException e) {e.printStackTrace();}var res = new JSONObject();res.put("flag", true);res.put("body", "上传成功");res.put("text", text);return res.toString();}
此处仅演示如何实现简单的文件上传,实际环境中,还需做相应的身份认证,权限控制等。