SpringMVC中使用ajaxfileupload非同步上傳圖片檔案視訊
阿新 • • 發佈：2019-02-13
摘要:
一、在專案中匯入commons-fileupload-1.3.1.jarcommons-io-2.4.jar 兩個jar包，引入專案中。、
二、並在Spring-mvc.xml中配置multipart的上傳解析器，這裡上傳的都是通過multipart這個類
<!-- ,SpringMVC上傳檔案時,file檔案上傳multipart 的解析器 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <!-- 指定所上傳檔案的總大小不能超過1024000KB......注意maxUploadSize屬性的限制不是針對單個檔案,而是所有檔案的容量之和 --> <property name="maxUploadSize" value="1024000"></property> <property name="defaultEncoding" value="utf-8" /><!--屬性：編碼 --> </bean>
三、設計HTML頁面，傳送非同步請求，我們這裡寫一個簡單的非同步請求上傳的頁面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/jquery-1.12.2.js" ></script> <script src="scripts/ajaxfileupload.js" type="text/javascript"></script> <title></title> </head> <body> <script type="text/javascript"> function ajaxFileUpload(){ //開始上傳檔案時顯示一個圖片,檔案上傳完成將圖片隱藏 //$("#loading").ajaxStart(function(){$(this).show();}).ajaxComplete(function(){$(this).hide();}); //執行上傳檔案操作的函式 $.ajaxFileUpload({ //處理檔案上傳操作的伺服器端地址(可以傳引數,已親測可用) url:'http://localhost:8080/ncNormalSchool/test/fileUpload.do?uname=玄玉', secureuri:false, //是否啟用安全提交,預設為false fileElementId:'myBlogImage', //檔案選擇框的id屬性 dataType:'json', //伺服器返回的格式,可以是json或xml等 success:function(result){ //伺服器響應成功時的處理函式 if(result.state==0){ alert(result.message); }else{ alert(result.message); } }, error:function(data, status, e){ //伺服器響應失敗時的處理函式 alert("響應失敗"); } }); } </script> <div id="result"></div> <img id="uploadImage" src="http://www.firefox.com.cn/favicon.ico"> <input type="file" id="myBlogImage" name="myfiles"/> <input type="button" value="上傳圖片" onclick="ajaxFileUpload()"/> </body> </html>
四、在Service或者Controller層編寫後臺接收介面，控制好異常接收，我這裡就寫在Controller中
@Controller @RequestMapping("/test") public class FileUploadController { /** * 這裡這裡用的是MultipartFile[] myfiles引數,所以前臺就要用<input type="file" name="myfiles"/> * 上傳檔案完畢後返回給前臺[0`filepath],0表示上傳成功(後跟上傳後的檔案路徑),1表示失敗(後跟失敗描述) */ @RequestMapping(value="/fileUpload.do") @ResponseBody public Object addUser(@RequestParam("uname") String uname, @RequestParam MultipartFile[] myfiles, HttpServletRequest request, HttpServletResponse response) throws IOException{ //可以在上傳檔案的同時接收其它引數 System.out.println("收到使用者[" + uname + "]的檔案上傳請求"); //如果用的是Tomcat伺服器，則檔案會上傳到\\%TOMCAT_HOME%\\webapps\\YourWebProject\\upload\\資料夾中 //這裡實現檔案上傳操作用的是commons.io.FileUtils類,它會自動判斷/upload是否存在,不存在會自動建立 String realPath = request.getSession().getServletContext().getRealPath("/upload/"); //設定響應給前臺內容的資料格式 //設定響應給前臺內容的PrintWriter物件 //上傳檔案的原名(即上傳前的檔名字) String originalFilename = null; //如果只是上傳一個檔案,則只需要MultipartFile型別接收檔案即可,而且無需顯式指定@RequestParam註解 //如果想上傳多個檔案,那麼這裡就要用MultipartFile[]型別來接收檔案,並且要指定@RequestParam註解 //上傳多個檔案時,前臺表單中的所有<input type="file"/>的name都應該是myfiles,否則引數裡的myfiles無法獲取到所有上傳的檔案 for(MultipartFile myfile : myfiles){ if(myfile.isEmpty()){ return new JsonResult(1,null, "請選擇圖片"); }else{ originalFilename = myfile.getOriginalFilename(); System.out.println("檔案原名: " + originalFilename); System.out.println("檔名稱: " + myfile.getName()); System.out.println("檔案長度: " + myfile.getSize()); System.out.println("檔案型別: " + myfile.getContentType()); System.out.println("========================================"); try { //這裡不必處理IO流關閉的問題,因為FileUtils.copyInputStreamToFile()方法內部會自動把用到的IO流關掉 //此處也可以使用Spring提供的MultipartFile.transferTo(File dest)方法實現檔案的上傳 File fileImage=new File(realPath, originalFilename); String filePath=fileImage.getAbsolutePath(); FileUtils.copyInputStreamToFile(myfile.getInputStream(),fileImage); System.out.println(filePath); System.out.println(realPath+"\\"+originalFilename); } catch (IOException e) { System.out.println("檔案[" + originalFilename + "]上傳失敗,堆疊軌跡如下"); e.printStackTrace(); return new JsonResult(1,null, "檔案上傳失敗，請重試！！"); } } } //此時在Windows下輸出的是[D:\Develop\apache-tomcat-6.0.36\webapps\AjaxFileUpload\\upload\憤怒的小鳥.jpg] //System.out.println(realPath + "\\" + originalFilename); //此時在Windows下輸出的是[/AjaxFileUpload/upload/憤怒的小鳥.jpg] System.out.println(request.getContextPath() + "/upload/" + originalFilename); //不推薦返回[realPath + "\\" + originalFilename]的值 //因為在Windows下<img src="file:///D:/aa.jpg">能被firefox顯示,而<img src="D:/aa.jpg">firefox是不認的 return new JsonResult("檔案上傳成功"); } }
總結：這裡的JsonResult是我寫的結果集物件，在上傳成功的時候，你可以返回一個成功與否的訊息給前臺，或者檔案上傳的地址之類的。
http://blog.csdn.net/qq_23993447/article/details/79574425