coding
文件上傳對于web開發(fā)來說是一個(gè)十分常見的問題，今天就來分享下 上傳文件 的問題。本文技術(shù)棧為：
前端：HTML / Jquery
后端：Java / SpringMVC / Spring boot
由于本人為后端程序員，前端樣式就忽略了，重點(diǎn)在使用js和后臺(tái)交互，以及后端如何拿到文件數(shù)據(jù)。
文件上傳可以通過form表單方式提交到后臺(tái)，也可以Ajax模擬表單方式提交到后臺(tái)，下邊分別演示。
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 將文件保存到服務(wù)器
return "another-page";
}
}
Ajax方式上傳
Ajax方式上傳本質(zhì)上還是模擬表單數(shù)據(jù)進(jìn)行提交，這種方式常用在表單中需要上傳文件，可以先用Ajax方式上傳到服務(wù)器，同時(shí)從后臺(tái)返回保存的路徑，前臺(tái)記錄此路徑，待提交整個(gè)表單數(shù)據(jù)時(shí)攜帶文件路徑一起提交到后臺(tái)保存入庫。
前端代碼：
<!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 將文件保存到服務(wù)器
return "success";
}
}
總結(jié)
本文演示了web開發(fā)中上傳文件的基本操作，后面將再寫一篇文章來演示如何進(jìn)行 多文件上傳，以及文件上傳中需要注意的地方。
圖片源自網(wǎng)絡(luò)，侵權(quán)必刪！
