ssm/springboot框架實現多文件上傳–MultipartFile類+multiple屬性+Ajax
首先搭建一個 SSM 或者 Spring Boot 項目，這裏簡單起見，項目就自行搭建了，直接用現成的一個 Spring Boot 項目來做這個功能實現。（代碼可以直接用在兩種項目上）
接下來開始功能實現：
1.首先新建一個 upload.ftl 文件，如果用的是JSP就新建 upload.jsp，其他模板如thymeleaf、Freemarker、Velocity，就建相應的，這裏我這個項目已經配置了用freemarker，所以就直接新建 ftl 文件了。
增加一個 form 表單，form 表單裏面添加兩個控件，一個用來選擇要上傳的文件，一個是用來提交表單的按鈕。
接下來，利用 ajax 來控制實現表單提交，這裏在<head>中引入 jQuery，方便開發
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
新建<Script>標籤編寫JavaScript ，爲上面的按鈕綁定一個點擊事件
寫到這裏，前端頁面就算寫好了，接下來寫後端代碼。新建一個 / 利用現有的 XxxxController.java 中創建兩個方法，一個跳轉到上傳頁面，一個實現上傳功能。如下：
跳轉頁面方法：
實現上傳功能方法：
到這裏，SSM / Spring Boot 框架的多文件上傳功能就已經實現了。下面開始測試。啓動項目
瀏覽器輸入：http://localhost:8081/cjcc，這裏的 /cjcc 就是上面 controller 方法的 @GetMapping("/cjcc"),並按 F12 打開開發人員工具–> newwork，方便測試。
點擊選擇文件按鈕，選擇需要上傳的文件
上傳成功之後，查看 Java 的控制檯，看看設置輸出的內容
至此，多文件已經成功上傳。
本次寫的多文件上傳主要用到了：
1.MultipartFile 類
import org.springframework.web.multipart.MultipartFile;
MultipartFile 類是用來接收前臺傳過來的文件，常用的方法如下：
String getContentType() //獲取文件MIME類型
InputStream getInputStream() //獲取文件流
String getName() //獲取表單中文件組件的名字
String getOriginalFilename() //獲取上傳文件的原名
long getSize() //獲取文件的字節大小，單位byte，除以1024就是kb
boolean isEmpty() //是否爲空
void transferTo(File dest) //保存到一個目標文件中。
2.multiple屬性（HTML5 新屬性）
multiple 屬性是一個布爾屬性。
multiple 屬性規定允許用戶輸入到 <input> 元素的多個參數值。
注意：multiple 屬性適用於以下 input 類型：email 和 file。
例如：
<!--上傳表單-start-->
<form enctype="multipart/form-data" id="form" method="post">
<!--構造一個input控件，類型爲 file， HTML5中 multiple 屬性規定輸入字段可選擇多個值 -->
<input name="file" type="file" multiple>
<!--構造一個input控件，爲控件綁定一個id=upload，類型爲 button，名稱爲：上傳-->
<input id="upload" type="button" value="上傳">
</form>
<!--上傳表單-end-->
3.jQuery的Ajax
AJAX = 異步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
簡短地說，在不重載整個網頁的情況下，AJAX 通過後臺加載數據，並在網頁上進行顯示。
GET 基本上用於從服務器獲得（取回）數據。註釋：GET 方法可能返回緩存數據。
POST 也可用於從服務器獲取數據。不過，POST 方法不會緩存數據（請求頭中的Cache-Control: no-cache），並且常用於連同請求一起發送數據。
功能完整代碼：
HTML：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>ssm/springboot框架實現多文件上傳</title>
<!--引入jQuery-->
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<h2>多文件上傳</h2>
<!--上傳表單-start-->
<form enctype="multipart/form-data" id="form" method="post">
<!--構造一個input控件，類型爲 file， HTML5中 multiple 屬性規定輸入字段可選擇多個值 -->
<input name="file" type="file" multiple>
<!--構造一個input控件，爲控件綁定一個id=upload，類型爲 button，名稱爲：上傳-->
<input id="upload" type="button" value="上傳">
</form>
<!--上傳表單-end-->
</body>
<script>
/**
* 上傳按鈕的點擊事件
*/
$("#upload").click(function () {
//因爲new FormData(HtmlElement)，需要的是HtmlElement類型，如果利用jQuery獲取，得到的是一個HtmlElement的集合，所以我們要取第一個值需要加下標$("#form")[0]
//JQuery 寫法 $("#form")[0] 等價於原生JavaScript的 document.getElementById("form");
//既然這裏已經導入了jQuery，那就用jQuery版本的寫法
var formData = new FormData($("#form")[0]);
//發送 ajax 請求
$.ajax("/uploadVideo2", {
method: "POST", //請求類型
data: formData, //請求數據
async: false, //不開啓異步，異步就是在執行到$.ajax({})的時候新開一個線程執行請求，主線程繼續往$.ajax({})函數下面執行，等到後端返回請求結果之後再觸發success或者error函數
cache: false, //不使用緩存，GET請求需要可以加，這裏的POST請求本身就不會被緩存
contentType: false, //避免jQuery影響上面form表單設置的 enctype="multipart/form-data"類型，在F12中可以看到Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryW44OhJyyAytghmVT，"multipart/form-data"類型包含了boundary分界線作爲多文件之間區分的邊界
processData: false, //避免data數據轉化爲字符串，在application/x-www-form-urlencoded”
success: function (data) { //操作成功
alert(data);
},
error: function (result) {//操作失敗
alert("添加失敗");
}
});
return false;
})
</script>
</html>
Java-Controller代碼：
package com.hh.onlinelearning.controller;
import org.springframework.stereotype.Controller;
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.IOException;
/**
* @author CJCC
*/
@Controller
public class IndexController {
/**
* 跳轉到上傳頁面
* @return
*/
@GetMapping("/cjcc") // 瀏覽器地址欄輸入的路徑
public String index2() {
// 項目文件夾 resource/templates/自定義文件夾/upload.ftl的路徑
// ftl是freemarker模板引擎文件後綴，用其他引擎的如JSP也是一樣的，在配置文件裏改響應的後綴就好了。
return "management/upload";
}
/**
* 上傳
* @param files
* @return
*/
@PostMapping("/uploadVideo2")// 瀏覽器地址欄輸入的路徑
@ResponseBody
public String uploadVideo2(@RequestParam("file")MultipartFile[] files) throws IOException {
/**
* MultipartFile類是用來接收前臺傳過來的文件，常用的方法如下：
* String getContentType() //獲取文件MIME類型
* InputStream getInputStream() //獲取文件流
* String getName() //獲取表單中文件組件的名字
* String getOriginalFilename() //獲取上傳文件的原名
* long getSize() //獲取文件的字節大小，單位byte，除以1024就是kb
* boolean isEmpty() //是否爲空
* void transferTo(File dest) //保存到一個目標文件中。
*/
for (MultipartFile file : files) { //因爲有上傳多個文件，所以用的是MultipartFile[]數組，所以要遍歷數組保存裏面的每一個文件
String filePath = "D:/files/"; // 暫時設置保存在D盤的files目錄下
System.out.println(" 文件名稱： " + file.getOriginalFilename());
System.out.println(" 文件大小： " + file.getSize() / 1024D + "Kb");
System.out.println(" 文件類型： " + file.getContentType());
System.out.println();
//在這裏執行調用文件保存的方法....
filePath = filePath + file.getOriginalFilename();
file.transferTo(new File(filePath));
filePath = "";
//其他業務代碼如插入數據庫代碼省略.........
}
return "添加成功";
}
}