coding
文件上传对于web开发来说是一个十分常见的问题，今天就来分享下 上传文件 的问题。本文技术栈为：
前端：HTML / Jquery
后端：Java / SpringMVC / Spring boot
由于本人为后端程序员，前端样式就忽略了，重点在使用js和后台交互，以及后端如何拿到文件数据。
文件上传可以通过form表单方式提交到后台，也可以Ajax模拟表单方式提交到后台，下边分别演示。
form表单上传
前端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上传文件</title>
</head>
<body>
<h1>文件上传示例</h1>
<form method="post" enctype="multipart/form-data" action="/upload-form" >
<input id="file" type="file" name="file" accept="*">
<input type="submit">
</form>
</body>
</html>
后端代码：
@Controller
public class UploadController {
@PostMapping("upload-form")
public String upload(@RequestParam("file") MultipartFile file) {
System.out.println(file.getOriginalFilename());
// todo 将文件保存到服务器
return "another-page";
}
}
Ajax方式上传
Ajax方式上传本质上还是模拟表单数据进行提交，这种方式常用在表单中需要上传文件，可以先用Ajax方式上传到服务器，同时从后台返回保存的路径，前台记录此路径，待提交整个表单数据时携带文件路径一起提交到后台保存入库。
前端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上传文件</title>
</head>
<body>
<h1>文件上传示例</h1>
<div>
<input id="file1" type="file" name="file1" accept="*">
<input type="button" value="上传" onclick="onUpload()">
</div>
<script type="text/javascript" src="/static/lib/jquery/1.9.1/jquery.min.js"></script>
<script>
function onUpload() {
var formData = new FormData();
// 获取文件
var fileData = $("#file1").prop("files")[0];
formData.append("file1", fileData);
$.ajax({
url: '/upload-ajax',
type: 'POST',
async: false,
data: formData,
cache: false,
contentType: false,
processData: false,
success: function (data) {
alert(data);
}
});
}
</script>
</body>
</html>
后端代码：
@Controller
public class UploadController {
@PostMapping("upload-ajax")
@ResponseBody
public String upload1(@RequestParam("file1") MultipartFile file) {
System.out.println(file.getOriginalFilename());
// todo 将文件保存到服务器
return "success";
}
}
总结
本文演示了web开发中上传文件的基本操作，后面将再写一篇文章来演示如何进行 多文件上传，以及文件上传中需要注意的地方。
图片源自网络，侵权必删！
