轉自：https://www.jianshu.com/p/f3987f0f471f

今天，我就這個問題來寫一篇如何用 SpringMVC + AJAX 實現的多檔案非同步上傳功能。基本的程式碼還是沿用上篇文章中所用到的專案，需要的朋友可以點選前面的連結檢視。在這裡只貼出關鍵程式碼。

首先我們要準備一個 JS 檔案，即：ajaxfileupload.js，它需要用到 jQuery，所以我們還需要準備 jQuery 的庫，兩個檔案在文末尾都有連結提供下載。

JSP 關鍵程式碼：

<li>
    <div>
    <input type="file" id="file1" name="imgFile" /><span class="uploadStatus"></span> </div> <div> <input type="file" id="file2" name="imgFile" /><span class="uploadStatus"></span> </div> <input type="button" onclick="ajaxUpload();" value="上傳檔案"/><br /> </li> 
 

兩個 file input 標籤的 name 是一致的“imgFile”，方便 SpringMVC 在 controller 層接收。每個 input 標籤後面跟一對 span 標籤，用於顯示上傳結果。
最後提供一個 button 按鈕，點選事件 onclick 執行下面我們即將寫的 JS 函式。

JS 關鍵程式碼：

<script src="js/jquery-2.1.0.js" type="text/javascript"></script> <script src="js/ajaxfileupload.js" type="text/javascript"></script> <script type="text/javascript"> // 多檔案非同步上傳 function ajaxUpload(){ $("input[type=file]").each(function(){ var fileEleId = $(this).attr("id"); // 單個檔案的非同步上傳 $.ajaxFileUpload({ url : 'user/ajaxUpload', // 用於檔案上傳的伺服器端請求地址 fileElementId : fileEleId, // 對應檔案上傳標籤的 id 屬性 type : 'post', dataType : 'text', //返回值型別 success : function(data, status) { document.getElementById(fileEleId).nextSibling.innerHTML ="上傳成功"; }, error : function(data, status, e) { document.getElementById(fileEleId).nextSibling.innerHTML ="上傳失敗"; } }); }); } </script> 
 

在迴圈中引用了 $.ajaxFileUpload 方法，這就是用來非同步上傳檔案用的方法啦！看結構是不是與 jQuery 的 $.ajax 很像呢？需要注意的是 fileElementId 這個引數，用於指定即將上傳檔案的 input file 的標籤 ID。最後在 success 函式中指定回傳狀態的顯示結果就可以了。JSP 部分的程式碼到此結束，是不是很簡單呢！

然後再來看對應 Controller 層程式碼，我們接著在上篇文章中用到的 UserController 類中寫對映方法。
Java 程式碼：

    /**
     * 檔案非同步上傳請求處理
     * @param request
     * @return 上傳結果：success、failed
     */
    @RequestMapping(value = "ajaxUpload", method = RequestMethod.POST) public @ResponseBody String ajaxUpload(HttpServletRequest request) { MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; // 獲取input file對應的 name 的檔案 MultipartFile mFile = multipartRequest.getFile("imgFile"); String path = "D:\\testFile\\"; // 儲存的檔案位置 String fileName = mFile.getOriginalFilename(); // 上傳的圖片所儲存在伺服器上的位置 String outPath = path + fileName; try(OutputStream outputStream = new FileOutputStream(outPath); InputStream inputStream = mFile.getInputStream();){ byte[] buffer = new byte[4096]; int length = 0; while((length = inputStream.read(buffer)) != -1){ outputStream.write(buffer, 0, length); } } catch (IOException ioe){ logger.info("File Upload Exception...", ioe); return "failed"; } return "success"; } 
 

這樣就OK了！
當然了，檔案上傳好了之後，我們還需要記錄儲存檔案的 URL 路徑到資料庫中，有一個比較好的思路：將儲存檔案的URL返回給前端 JSP，然後在 JSP 上建立 hidden 隱藏表單域，將 URL 填寫到 隱藏表單域中，提交表單時，直接傳遞 URL 給後端儲存即可。