在SSM框架中使用AJAX實現多檔案上傳
阿新 • • 發佈：2018-11-14
今天來學習一下在SSM框架中使用ajax實現檔案的上傳。
1.首先我們需要一個搭建好的SSM框架專案，這個在這篇文章裡不是重點，自行先搭建好需要的專案。
這裡我是用的jsp頁面來和後臺介面關聯，在jsp檔案中我們需要一個form表單，請求方法為POST,enctype="multipart/form-data",設定這樣的一些屬性，在表單的子標籤裡面要一個type=“file”的input標籤；像這樣的<input type="file" id="file" name="file"/> ，當然也可以指定multiple="multiple"，這樣就可以支援多個檔案的上傳了。除了file型別的標籤，我們還需要一個輔助的標籤來響應ajax請求，一般來說就是用最簡單的button型別的input標籤了，記住 這裡的ipnut標籤的型別不能寫submit，否則就直接是表單的提交了，和咱們的ajax沒啥關係了。
<script type="text/javascript" src="../lib/js/jquery-1.9.0.min.js"></script>下面的就直接貼JSP程式碼吧，方便直觀！
<%-- Created by IntelliJ IDEA. User: admin Date: 2018/6/28 Time: 20:53 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <script type="text/javascript" src="../lib/js/jquery-1.9.0.min.js"></script> <title>檔案上傳</title> </head> <body> <div style="align-items: center;align-content: center;"> <h1>檔案上傳</h1> <form id="form" method="post" enctype="multipart/form-data"> <p>請選擇要上傳的檔案:</p> <input id="file" name="file" type="file" multiple="multiple"/> <br> <input id="upload" name="upload" type="button" value="上傳"> </form> </div> </body> <script> $(window).ready(function () { $("#upload").click(function () { var formData = new FormData($('#form')[0]);//獲取表單中的檔案 //ajax請求 $.ajax({ url:"/file/upload",//後臺的介面地址 type:"post",//post請求方式 data:formData,//引數 cache: false, processData: false, contentType: false, success:function (data) { alert(data); },error:function () { alert("操作失敗~"); } }) }); }); </script> </html>
再看下前面的JSP頁面執行後長啥樣吧！
好了，前面的事情做完了，接著來說說後臺的處理。 2.編寫檔案上傳的後臺處理介面，咱們使用的SSM框架，所以只需要在controller層寫一個uploadFileController類就行了，這個地方也沒啥好說的直接看程式碼和註釋吧！
執行一下，試試上傳的結果。 如圖所示：package com.ssm.controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.multipart.MultipartFile; import java.io.File; import java.io.IOException; /** * created by viking 2018/06/28 * 檔案上傳介面 */ @RestController @RequestMapping("file") public class UploadFileController { @RequestMapping(value = "upload", method = RequestMethod.POST) public String upload(@RequestParam("file") MultipartFile[] files){//支援多個檔案的上傳 //例項化一個檔案存放的目錄地址 String dir = "F:/uploadFile/"; for (MultipartFile file : files){ System.out.println("檔案型別:"+file.getContentType()); String filename = file.getOriginalFilename(); String suffix = filename.substring(filename.length() - 3); System.out.println("檔名:"+filename); System.out.println("檔案字尾:"+suffix); System.out.println("檔案大小:"+file.getSize()/1024+"KB"); //建立要儲存檔案的路徑 File dirFile = new File(dir,filename); if (!dirFile.exists()){ dirFile.mkdirs(); } try { //將檔案寫入建立的路徑 file.transferTo(dirFile); System.out.println("檔案儲存成功~"); } catch (IOException e) { e.printStackTrace(); } } return "OK"; } }
檔案所在目錄的結果：
結果完美的將我們上傳的檔案儲存在本地了。 大概就是這些了，如果大家覺得有問題的地方可以留言，我們一起討論。 如果有不正確的地方歡迎各路大神指教~~