利用SpringMVC接收復(fù)雜對象和多個(gè)文件(前端使用JQuery)
前言
這里我先說一下標(biāo)題中描述的復(fù)雜的對象是什么?
就是一個(gè)對象的成員變量不僅包含基本類型的成員變量(int
),也包含自定義類成員變量(UserCategory
)。
如果SpringMVC
只是接收復(fù)雜的對象這一個(gè)參數(shù),那我們有很多種辦法來處理這種情況,可以看看我前面寫的文章(springmvc參數(shù)傳遞——基本數(shù)據(jù)類型和復(fù)雜對象)。
但這里我們要提到的是同時(shí)接收復(fù)雜的對象和多個(gè)文件。
將要使用的類和配置
//User 用戶 public class User { private String name; private int age; private UserCategory userCategory; //getter and setter }
//UserCategory 用戶分類 public class UserCategory { private Integer userCategoryId; private String userCategoryName; //getter and setter }
這里只展示spring-web.xml
配置文件中重要的部分內(nèi)容(一定要配置文件解析器)
.... <context:component-scan base-package="com.lxc.controller"></context:component-scan> <mvc:default-servlet-handler></mvc:default-servlet-handler> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="defaultEncoding" value="utf-8"></property> <!--上傳文件最大大?。J(rèn)單位為字節(jié)) 1024*1024*20(20M,1kb=1024byte) --> <property name="maxUploadSize" value="20971520"></property> <!--最大內(nèi)存 --> <property name="maxInMemorySize" value="20971520"></property> </bean> <mvc:annotation-driven></mvc:annotation-driven> ....
前端頁面和JS文件
HTML頁面
<body> <div id="content"> 姓名:<input type="name" id="name"/><br/> 年齡:<input type="number" id="age"/><br/> 分類:<select id="user-category"> <option data-value="1">學(xué)生</option> <option data-value="2">老師</option> <option data-value="3">管理員</option> </select> <div id="img-div"> <label>詳情圖:</label> <div id="img"> <input type="file" class="detail-img"/><br/> </div> </div> <input type="submit" id="submit" value="提交"> </div> <script type="text/javascript" src="./resources/jquery-3.4.1.min.js"></script> <script type="text/javascript" src="./resources/upload.js"></script> </body>
JS文件
由于是復(fù)雜的對象,所以前臺只能發(fā)送user
對象的json
字符串(如果不是復(fù)雜的對象,前臺也可以直接發(fā)送user
的json
對象)
$(function(){ /** * 自動(dòng)添加文件上傳控件 * 針對商品詳情圖控件組,若該控件組的最后一個(gè)元素發(fā)生變化(即上傳了圖片) * 且控件總數(shù)未達(dá)到6個(gè),則生成新的一個(gè)文件上傳控件 */ $('#img-div').on('change','#img:last-child',function () { if($('.detail-img').length<6){ $('#img').append('<input type="file" class="detail-img"/><br/>'); } }) //點(diǎn)擊提交按鈕向后臺提交數(shù)據(jù) $('#submit').click(function () { var user={}; user.name=$('#name').val(); user.age=$('#age').val(); //分類 // find()方法獲得當(dāng)前元素集合中每個(gè)元素的后代中,通過選擇器、jQuery // 對象或元素來篩選,這里代表獲得所有id為shop-category元素的后代option元素 // not()方法表示從匹配元素集合中刪除元素。參數(shù)function是用于檢測集合中每個(gè)元素的函數(shù)。 // 下面的語句表示獲得被選中元素的data-id值 user.userCategory={"userCategoryId":$('#user-category').find('option').not(function(){ // this代表該DOM元素,返回true排除元素集合中的該元素,返回false則保留集合中的該元素 return !this.selected; }).data('value')} //或者寫成().dataset.value //把前臺的信息存儲進(jìn)formData中,傳到后臺中 var formData=new FormData(); formData.append("user",JSON.stringify(user)); //獲取文件 $('.detail-img').map(function (index,item) { //判斷是否上傳了文件 //$('xx')[0]是為了把JQuery對象轉(zhuǎn)換成JavaScript對象,操作JS的方法 //files[0]是獲取第一個(gè)文件流(這里一個(gè)控件也只能上傳一個(gè)文件) if($('.detail-img')[index].files.length>0){ //獲取第index控件的文件流 ,保存到formData中 formData.append("detailImg",$('.detail-img')[index].files[0]); } }); //使用ajax向后臺傳遞數(shù)據(jù) $.ajax({ url:'/upload/test/adduser', type:'POST', data:formData, cache:false, // 如果要發(fā)送 DOM 樹信息或其它不希望轉(zhuǎn)換的信息,請?jiān)O(shè)置為 false。默認(rèn)情況下, // 通過data選項(xiàng)傳遞進(jìn)來的數(shù)據(jù),如果是一個(gè)對象(技術(shù)上講只要不是字符串),都會(huì)處理轉(zhuǎn)化成一個(gè)查詢字符串 processData:false, // 不設(shè)置內(nèi)容類型 contentType:false, dataType:'json', success:function (data) { if(data.success){ alert("添加用戶信息成功"); }else{ alert("添加用戶信息失敗"); } } }) }) })
后臺使用SpringMVC接收數(shù)據(jù)
使用SpringMVC參數(shù)綁定
@RequestMapping("/test") @Controller public class ParamController { @RequestMapping(value="/adduser",method = RequestMethod.POST) @ResponseBody private Map<String,Object> addUser(@RequestParam("user")String userStr, @RequestParam("detailImg")MultipartFile[] imgs){ Map<String,Object> modelMap=new HashMap<>(); if(userStr!=null&&imgs.length>0){ try{ //模擬處理user信息(具體按業(yè)務(wù)需要) ObjectMapper objectMapper=new ObjectMapper(); User user=objectMapper.readValue(userStr,User.class); System.out.println(user); //模擬處理上傳的文件(具體按業(yè)務(wù)需要) System.out.println(imgs.length); modelMap.put("success",true); }catch (Exception e){ System.out.println(e.toString()); modelMap.put("success",false); modelMap.put("msg","內(nèi)部錯(cuò)誤"); } }else{ modelMap.put("success",false); } return modelMap; } }
使用傳統(tǒng)的HttpServletRequest接收
使用這種方法有利于前端和后端的解耦
@RequestMapping(value="/adduser",method = RequestMethod.POST) @ResponseBody private Map<String,Object> addUser(HttpServletRequest request) { Map<String, Object> modelMap = new HashMap<>(); try { //1.從request請求中提取User信息 String userStr = request.getParameter("user"); ObjectMapper objectMapper = new ObjectMapper(); User user = objectMapper.readValue(userStr, User.class); //2.從request請求中提取多個(gè)文件 List<MultipartFile> files=new ArrayList<>(); CommonsMultipartResolver commonsMultipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext()); //判斷請求中是否有文件流 if (commonsMultipartResolver.isMultipart(request)) { MultipartHttpServletRequest multipartRequest=(MultipartHttpServletRequest)request; //MAX_FILE_COUNT為最大的文件上傳數(shù)量,跟前端規(guī)定最多只能上傳6個(gè)文件有關(guān) files=multipartRequest.getFiles("detailImg"); //下面這種方法對于我們現(xiàn)在的場景不適用,因?yàn)槲覀兩蟼鞯奈募家粯樱琺ap中key是唯一的 //Map<String,MultipartFile> map=multipartRequest.getFileMap(); } //根據(jù)具體業(yè)務(wù)邏輯處理user和files //........ modelMap.put("success",true); } catch (Exception e) { modelMap.put("success",false); } return modelMap; }
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
java環(huán)境變量的配置方法圖文詳解【win10環(huán)境為例】
這篇文章主要介紹了java環(huán)境變量的配置方法,結(jié)合圖文形式詳細(xì)分析了win10環(huán)境下java環(huán)境變量的配置方法與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-04-04java.lang.Void 與 void的比較及使用方法介紹
這篇文章主要介紹了java.lang.Void 與 void的比較及使用方法介紹,小編覺得挺不錯(cuò)的,這里給大家分享一下,需要的朋友可以參考。2017-10-10如何在Maven項(xiàng)目中運(yùn)行JUnit5測試用例實(shí)現(xiàn)
這篇文章主要介紹了如何在Maven項(xiàng)目中運(yùn)行JUnit5測試用例實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04淺談java調(diào)用Restful API接口的方式
這篇文章主要介紹了淺談java調(diào)用Restful API接口的方式,具有一定借鑒價(jià)值,需要的朋友可以參考下。2017-12-12