spring mvc實現帶有文件表單的異步上傳


【聲明】本文中使用到的ajaxFileUpload.js非自己原創,但經過了自己的一些改良,此處只是為了方面日后使用時候查詢,未經博主同意不得轉載

本人在項目中遇到這種情況:需要提交一個表單,該表單內需要帶有一張圖片,以二進制的的形式存進數據庫,經過網上查閱資料和自己的摸索,總結了以下方法:

需要注意的是數據庫一般不直接存儲圖片數據,除了想頭像這種很小的圖片,否則一般都是利用FTP直接存到專門的圖片服務器中(推薦),或者存到項目服務器的磁盤中

方法一:與ajaxFileUpload.js結合使用,實現一步上傳(不需要臨時文件夾)

首先要先引入ajaxFileUpload.js文件,這個網上有很多,但是很多都是不夠完整的,我用的是經過自己改良的

下載地址:xxx

注意導入的順序,需要在jquery之后,因為它實現的是繼承於jQuery的。

第一步:jsp頁面,構建表單

頁面jsp對應的js部分:

           提交核心js代碼:

在這個地方需要特別注意的是:直接用jquery的serialize()方法后台是無法獲取到參數,更不能自行幫你封裝成對象,如果要詳細了解,進入ajaxFileUpload.js源碼查看即可

前端的圖片:

 

第二步:controller接收以及spring-mvc的配置


控制層的接收 需要先配置spring-mvc.xml,我這里只是最簡單的配置,還可以配置上傳的大小、格式等等,也可以直接在接收方法里面實現,需要的話自行百度

在配置該改配置的時候,也需要導入支持文件上傳的jar,本人使用的maven,

maven代碼:

 

控制層代碼:此處是以二進制存入數據庫,並且沒有做對應的判斷,需要自己補充

如果上傳失敗,應該直接return掉,不在執行,最主要的業務邏輯必須放在service層處理

 到了這邊上傳並存入數據庫就完成了

 

補充:實現加載顯示和上傳前預覽

1.加載顯示


我們在修改編輯的時候需要充數據庫取出圖片字段的二進制數據:一般是byte[]

controller:

jsp的js請求方法:

 

2.上傳前圖片預覽和清除

在上傳圖片之前需要預覽圖片,我采用在js直接加載要上傳的圖片進行顯示,這個想要了解自行百度,此處不再贅述

至此,第一種方法的主要結構基本完成。

 

第二種:未完待續...后面有用到其他方法會陸續補充

如果大家有更好的方法或者意見建議,歡迎交流或者指正,三人行必有我師焉,謝謝!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM