前言

这里我先说一下标题中描述的复杂的对象是什么?

就是一个对象的成员变量不仅包含基本类型的成员变量(int),也包含自定义类成员变量(UserCategory)。

如果SpringMVC只是接收复杂的对象这一个参数,那我们有很多种办法来处理这种情况,可以看看我前面写的文章(springmvc参数传递——基本数据类型和复杂对象)。

但这里我们要提到的是同时接收复杂的对象和多个文件。

将要使用的类和配置

//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配置文件中重要的部分内容(一定要配置文件解析器)

 ....
<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>
       <!--上传文件最大大小(默认单位为字节) 1024*1024*20(20M,1kb=1024byte) -->
       <property name="maxUploadSize" value="20971520"></property>
       <!--最大内存  -->
       <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">学生</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文件

由于是复杂的对象,所以前台只能发送user对象的json字符串(如果不是复杂的对象,前台也可以直接发送userjson对象)

$(function(){
    /**
     * 自动添加文件上传控件
     * 针对商品详情图控件组,若该控件组的最后一个元素发生变化(即上传了图片)
     * 且控件总数未达到6个,则生成新的一个文件上传控件
     */
    $('#img-div').on('change','#img:last-child',function () {
        if($('.detail-img').length<6){
            $('#img').append('<input type="file" class="detail-img"/><br/>');
        }
    })

    //点击提交按钮向后台提交数据
    $('#submit').click(function () {
        var user={};
        user.name=$('#name').val();
        user.age=$('#age').val();
        //分类
        // find()方法获得当前元素集合中每个元素的后代中,通过选择器、jQuery
        // 对象或元素来筛选,这里代表获得所有id为shop-category元素的后代option元素
        // not()方法表示从匹配元素集合中删除元素。参数function是用于检测集合中每个元素的函数。
        // 下面的语句表示获得被选中元素的data-id值
        user.userCategory={"userCategoryId":$('#user-category').find('option').not(function(){
            // this代表该DOM元素,返回true排除元素集合中的该元素,返回false则保留集合中的该元素
            return !this.selected;
        }).data('value')}  //或者写成().dataset.value

        //把前台的信息存储进formData中,传到后台中
        var formData=new FormData();
        formData.append("user",JSON.stringify(user));

        //获取文件
        $('.detail-img').map(function (index,item) {
            //判断是否上传了文件
            //$('xx')[0]是为了把JQuery对象转换成JavaScript对象,操作JS的方法
            //files[0]是获取第一个文件流(这里一个控件也只能上传一个文件)
            if($('.detail-img')[index].files.length>0){
                //获取第index控件的文件流 ,保存到formData中
                formData.append("detailImg",$('.detail-img')[index].files[0]);
            }
        });

        //使用ajax向后台传递数据
        $.ajax({
            url:'/upload/test/adduser',
            type:'POST',
            data:formData,
            cache:false,
            // 如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。默认情况下,
            // 通过data选项传递进来的数据,如果是一个对象(技术上讲只要不是字符串),都会处理转化成一个查询字符串
            processData:false,
            // 不设置内容类型
            contentType:false,
            dataType:'json',
            success:function (data) {
                if(data.success){
                    alert("添加用户信息成功");
                }else{
                    alert("添加用户信息失败");
                }
            }
        })
    })
})

后台使用SpringMVC接收数据

使用SpringMVC参数绑定

@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信息(具体按业务需要)
                ObjectMapper objectMapper=new ObjectMapper();
                User user=objectMapper.readValue(userStr,User.class);
                System.out.println(user);
                //模拟处理上传的文件(具体按业务需要)
                System.out.println(imgs.length);
                modelMap.put("success",true);
            }catch (Exception e){
                System.out.println(e.toString());
                modelMap.put("success",false);
                modelMap.put("msg","内部错误");
            }
        }else{
            modelMap.put("success",false);
        }
        return modelMap;
    }
}

使用传统的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请求中提取多个文件
            List<MultipartFile> files=new ArrayList<>();
            CommonsMultipartResolver commonsMultipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
            //判断请求中是否有文件流
            if (commonsMultipartResolver.isMultipart(request)) {
                MultipartHttpServletRequest multipartRequest=(MultipartHttpServletRequest)request;
                //MAX_FILE_COUNT为最大的文件上传数量,跟前端规定最多只能上传6个文件有关
                files=multipartRequest.getFiles("detailImg");
                //下面这种方法对于我们现在的场景不适用,因为我们上传的文件名都一样,map中key是唯一的
                //Map<String,MultipartFile> map=multipartRequest.getFileMap();
            }
            //根据具体业务逻辑处理user和files
            //........
            modelMap.put("success",true);
        } catch (Exception e) {
            modelMap.put("success",false);
        }
        return modelMap;
    }

以上为个人经验,希望能给大家一个参考,也希望大家多多支持Devmax。

利用SpringMVC接收复杂对象和多个文件(前端使用JQuery)的更多相关文章

  1. JSP中springmvc配置validator的注意事项

    这篇文章主要介绍了JSP中springmvc配置validator的注意事项的相关资料,并说明springmvc中spring-servlet.xml、applicationContext.xml的区别需要的朋友可以参考下

  2. SpringMVC拦截器和异常处理器使用示例超详细讲解

    拦截器(Interceptor)是一种动态拦截方法调用的机制,在SpringMVC中动态拦截控制器方法的执行。本文将详细讲讲SpringMVC中拦截器参数及拦截器链配置,感兴趣的可以尝试一下

  3. SpringMVC数据页响应ModelAndView实现页面跳转

    本文主要介绍了SpringMVC数据页响应ModelAndView实现页面跳转,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  4. SpringMVC静态资源配置过程详解

    在javaweb项目中配置了DispatcherServlet的情况下,如果不进行额外配置的话,几乎所有的请求都会走这个servlet来处理,默认静态资源按路径是访问不到的会报404错误,下面就来讲一讲如何配置才能访问到静态资源吧

  5. 详解SpringMVC中的四种跳转方式、视图解析器问题

    这篇文章主要介绍了SpringMVC的四种跳转方式、视图解析器,springmvc核心配置文件和视图解析器的使用,添加视图解析器,通过案例讲解四种跳转方式,需要的朋友可以参考下

  6. 详解SpringMVC的两种实现方式

    这篇文章主要介绍了SpringMVC的两种实现方式,方式一是通过实现Controller接口,方式二是使用注解开发,本文结合示例代码给大家介绍的非常详细,需要的朋友可以参考下

  7. SpringMVC程序简单实例

    这篇文章主要介绍了SpringMVC程序简单实例的相关资料,需要的朋友可以参考下

  8. SpringMVC常用注解载入与处理方式详解

    这篇文章主要介绍了SpringMVC常用注解载入的方式和处理的方式,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  9. SpringMVC上传文件的简单实例

    这篇文章主要介绍了SpringMVC上传文件的简单实例的相关资料,需要的朋友可以参考下

  10. 解决ajax传过来的值后台接收不到的问题

    今天小编就为大家分享一篇解决ajax传过来的值后台接收不到的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

随机推荐

  1. 基于EJB技术的商务预订系统的开发

    用EJB结构开发的应用程序是可伸缩的、事务型的、多用户安全的。总的来说,EJB是一个组件事务监控的标准服务器端的组件模型。基于EJB技术的系统结构模型EJB结构是一个服务端组件结构,是一个层次性结构,其结构模型如图1所示。图2:商务预订系统的构架EntityBean是为了现实世界的对象建造的模型,这些对象通常是数据库的一些持久记录。

  2. Java利用POI实现导入导出Excel表格

    这篇文章主要为大家详细介绍了Java利用POI实现导入导出Excel表格,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  3. Mybatis分页插件PageHelper手写实现示例

    这篇文章主要为大家介绍了Mybatis分页插件PageHelper手写实现示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

  4. (jsp/html)网页上嵌入播放器(常用播放器代码整理)

    网页上嵌入播放器,只要在HTML上添加以上代码就OK了,下面整理了一些常用的播放器代码,总有一款适合你,感兴趣的朋友可以参考下哈,希望对你有所帮助

  5. Java 阻塞队列BlockingQueue详解

    本文详细介绍了BlockingQueue家庭中的所有成员,包括他们各自的功能以及常见使用场景,通过实例代码介绍了Java 阻塞队列BlockingQueue的相关知识,需要的朋友可以参考下

  6. Java异常Exception详细讲解

    异常就是不正常,比如当我们身体出现了异常我们会根据身体情况选择喝开水、吃药、看病、等 异常处理方法。 java异常处理机制是我们java语言使用异常处理机制为程序提供了错误处理的能力,程序出现的错误,程序可以安全的退出,以保证程序正常的运行等

  7. Java Bean 作用域及它的几种类型介绍

    这篇文章主要介绍了Java Bean作用域及它的几种类型介绍,Spring框架作为一个管理Bean的IoC容器,那么Bean自然是Spring中的重要资源了,那Bean的作用域又是什么,接下来我们一起进入文章详细学习吧

  8. 面试突击之跨域问题的解决方案详解

    跨域问题本质是浏览器的一种保护机制,它的初衷是为了保证用户的安全,防止恶意网站窃取数据。那怎么解决这个问题呢?接下来我们一起来看

  9. Mybatis-Plus接口BaseMapper与Services使用详解

    这篇文章主要为大家介绍了Mybatis-Plus接口BaseMapper与Services使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

  10. mybatis-plus雪花算法增强idworker的实现

    今天聊聊在mybatis-plus中引入分布式ID生成框架idworker,进一步增强实现生成分布式唯一ID,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

返回
顶部