目錄
- 文件上傳
- @ModelAttribute注解
- 實驗目的
- 實驗內容
- 實驗過程
- 項目結構
- 編寫代碼
- 結果展示
文件上傳
Spring MVC 提供 MultipartFile 接口作為參數來處理文件上傳。
MultipartFile 提供以下方法來獲取上傳的文件信息:
? getOriginalFilename 獲取上傳的文件名字;
? getInputStream 獲取一個 InputStream;
? getSize 上傳文件的大小
? isEmpty 文件上傳內容為空,或者沒有文件上傳
如果上傳單個文件,使用 MultipartFile 類對象接收單個上傳文件,如果是同時上傳多個
文件,則使用 MultipartFile 數組類來接收多個文件。
例 1:單個文件上傳
@PostMapping("/upload/multipart")
@ResponseBody
public Map<String, Object> upload(@RequestParam("photo") MultipartFile
photo)
{
。。。
}
其中,upload 方法參數類型為 MultipartFile,使用 photo 對象接收單個上傳文件,
@RequestParam("photo")獲取請求參數“photo”值,該變量名稱與視圖表單中的名稱對
應。
<input type="file" name="photo" value="請選擇上傳的文件" />
例 2:批量文件上傳
@PostMapping("/upload/multipart1")
@ResponseBody
// 使用Spring MVC的MultipartFile類作為參數
public Map<String, Object> upload1(@RequestParam("photo")
MultipartFile[] photos){。。。}
2
其中,upload1 方法參數類型為 MultipartFile[],即使用數組來接收多個上傳的文
件。這要求 HTTP 請求中包含有多個名字為“photo”的文件。
<form method="post"action="./multipart1" enctype="multipart/form-data"><input type="file" name="photo" value="請選擇上傳的文件" /><p><input type="file" name="photo" value="請選擇上傳的文件" /><p><input type="file" name="photo" value="請選擇上傳的文件" /><p> <input type="submit" value="提交" /></form>
@ModelAttribute注解
@ModelAttribute 注解主要是將請求參數綁定到 Model 對象上。@ModelAttribute 注解只
有一個 Value 屬性,類型為 String,表示綁定的屬性名稱。當 Controller 類中有任意一個方法
被@ModelAttribute 注解標記,頁面請求只要進入這個控制器,不管請求哪個方法,均會先
執行被@ModelAttribute 標記的方法,所以可以用@ModelAttribute 注解的方法做一些初始化
操作。當同一個 Controller 類中有多個方法被@ModelAttribute 注解標記,所有被
@ModelAttribute 注解標記的方法均會被執行,按先后順序執行,然后再進圖請求的方法。
實驗目的
(1) 掌握 MultipartFile 類的使用
(2) 掌握 Spring MVC 實現文件上傳方法
(3) 掌握@ModelAttribute 注解的使用方法
實驗內容
(1) Spring MVC 框架實現單文件上傳。
(2) Spring MVC 框架實現批量文件上傳。
(3) @ModelAttribute 注解應用
實驗過程
項目結構
當然原本uploaded里面是什么都沒有的,這里本來就是存放上傳的文件的地方
編寫代碼
FileController
import org.springframework.stereotype.Controller;
import org.springframework.util.FileCopyUtils;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import java.util.logging.SimpleFormatter;@Controller
public class FileController {// 定義一個跳轉到上傳頁面的方法,映射到/upload/page路徑@GetMapping("/upload/page")public String uploadPage(){return "/file/upload";}// 定義一個處理文件上傳的方法,映射到/upload/multipart路徑@PostMapping("/upload/multipart")@ResponseBody//使用Spring MVC的MultipartFile數組作為參數,對應了保存的臨時文件public Map<String,Object> upload(@RequestParam("photo")MultipartFile[] photos){String path="D:/idea/code/java/MultipartFile/src/main/resources/uploaded/";//保存路徑// 定義一個計數器,用于記錄上傳成功的文件個數int count = 0;// 遍歷上傳的文件數組for (MultipartFile photo : photos) {// 使用日期格式化類來生成文件名String filename=new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date());//獲取上傳文件的后綴suffixString suffix=photo.getOriginalFilename().substring(photo.getOriginalFilename().lastIndexOf("."));// 判斷文件的后綴是否是.jpg,如果不是則跳過這個文件if(!suffix.equals(".jpg")){continue;}try {// 創建一個文件對象,指定保存的位置和文件名File destFile = new File(path + filename + suffix);// 判斷文件的父目錄是否存在,如果不存在則創建if (!destFile.getParentFile().exists()) {destFile.getParentFile().mkdirs();}// 將文件保存到指定的位置photo.transferTo(destFile);// 將計數器加一count++;}catch (IOException e){// 捕獲異常并打印e.printStackTrace();}}// 判斷計數器是否大于零,如果是則表示有文件上傳成功if (count > 0) {// 返回一個成功的提示信息return dealResultMap(true,"上傳成功,共上傳了" + count + "個文件");} else {// 返回一個失敗的提示信息return dealResultMap(false,"上傳失敗,沒有符合條件的文件");}}//處理上傳文件結果private Map<String,Object>dealResultMap(boolean success,String msg){Map<String,Object> result=new HashMap<String,Object>();result.put("success",success);result.put("msg",msg);return result;}}
upload.html
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>文件上傳</title>
</head>
<body>
<h1>文件上傳</h1>
<p>請選擇一個.jpg格式的圖片文件,然后點擊上傳按鈕,將文件上傳到服務器。</p>
<form action="/upload/multipart" method="post" enctype="multipart/form-data"><input type="file" name="photo" accept="image/jpeg"><input type="submit" value="上傳">
</form>
<div id="result"></div>
<script>// 獲取表單元素var form = document.querySelector("form");// 獲取結果元素var result = document.getElementById("result");// 監聽表單的提交事件form.addEventListener("submit", function(event) {// 阻止表單的默認提交行為event.preventDefault();// 創建一個FormData對象,用于封裝表單數據var formData = new FormData(form);// 創建一個XMLHttpRequest對象,用于發送異步請求var xhr = new XMLHttpRequest();// 設置請求的方法和地址xhr.open("POST", "/upload/multipart");// 設置請求的響應類型為JSONxhr.responseType = "json";// 設置請求的回調函數xhr.onload = function() {// 判斷請求的狀態是否成功if (xhr.status === 200) {// 獲取響應的數據var data = xhr.response;// 判斷上傳的結果是否成功if (data.success) {// 顯示成功的提示信息result.innerHTML = "<p style='color:green'>" + data.msg + "</p>";} else {// 顯示失敗的提示信息result.innerHTML = "<p style='color:red'>" + data.msg + "</p>";}} else {// 顯示錯誤的提示信息result.innerHTML = "<p style='color:red'>請求失敗,狀態碼:" + xhr.status + "</p>";}};// 發送請求xhr.send(formData);});
</script>
</body>
</html>
MultipartFileApplication
import com.example.multipartfile.controller.FileController;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;@SpringBootApplication
public class MultipartFileApplication {public static void main(String[] args) {SpringApplication.run(MultipartFileApplication.class, args);}}
結果展示
搜索自己對應的url
單擊選擇文件,打開文件夾進行文件的選擇
選擇好文件
點擊上傳
返回idea中查看
在選擇的保存路徑uploaded中出現了我們選擇上傳的圖片,當然也可以選擇多文件上傳,只要同時選擇多個文件,然后點擊上傳就可以了