欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

利用SpringMVC接收復(fù)雜對象和多個(gè)文件(前端使用JQuery)

 更新時(shí)間:2022年10月26日 11:47:00   作者:lxcoding  
這篇文章主要介紹了利用SpringMVC接收復(fù)雜對象和多個(gè)文件(前端使用JQuery),具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

前言

這里我先說一下標(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ā)送userjson對象)

$(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)文章

  • 詳細(xì)談?wù)凷pring事務(wù)是如何管理的

    詳細(xì)談?wù)凷pring事務(wù)是如何管理的

    在使用傳統(tǒng)的事務(wù)編程策略時(shí),程序代碼必然和具體的事務(wù)操作代碼耦合,而使用Spring事務(wù)管理策略恰好可以避免這種尷尬,Spring的事務(wù)管理提供了兩種方式:編程式事務(wù)管理和聲明式事務(wù)管理,這篇文章主要給大家介紹了關(guān)于Spring事務(wù)是如何管理的相關(guān)資料,需要的朋友可以參考下
    2021-09-09
  • java用戶名密碼驗(yàn)證示例代碼分享

    java用戶名密碼驗(yàn)證示例代碼分享

    這篇文章主要介紹了java用戶名密碼驗(yàn)證示例代碼,需要的朋友可以參考下
    2014-03-03
  • mybatis之BaseTypeHandler用法解讀

    mybatis之BaseTypeHandler用法解讀

    這篇文章主要介紹了mybatis之BaseTypeHandler用法解讀,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • 教你如何正確了解java三大特性!!!!

    教你如何正確了解java三大特性!!!!

    所有的面向?qū)ο缶幊陶Z言的思路都是差不多的,而這三大特性,則是思路中的支柱點(diǎn),接下來我就重點(diǎn)講解了一下java三大特性,感興趣的朋友跟隨腳本之家小編一起看看吧
    2021-07-07
  • 淺談Spring中單例Bean是線程安全的嗎

    淺談Spring中單例Bean是線程安全的嗎

    這篇文章主要介紹了淺談Spring中單例Bean是線程安全的嗎?具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • java環(huán)境變量的配置方法圖文詳解【win10環(huán)境為例】

    java環(huán)境變量的配置方法圖文詳解【win10環(huán)境為例】

    這篇文章主要介紹了java環(huán)境變量的配置方法,結(jié)合圖文形式詳細(xì)分析了win10環(huán)境下java環(huán)境變量的配置方法與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
    2020-04-04
  • java.lang.Void 與 void的比較及使用方法介紹

    java.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)

    這篇文章主要介紹了如何在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接口的方式

    這篇文章主要介紹了淺談java調(diào)用Restful API接口的方式,具有一定借鑒價(jià)值,需要的朋友可以參考下。
    2017-12-12
  • 關(guān)于List、Map、Stream初始化方式

    關(guān)于List、Map、Stream初始化方式

    這篇文章主要介紹了關(guān)于List、Map、Stream初始化方式,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-08-08

最新評論