spring MVC 实现 ajax 文件加参数上传

最新推荐文章于 2024-07-30 09:22:36 发布

JodenHe

最新推荐文章于 2024-07-30 09:22:36 发布

阅读量1.1k

点赞数

分类专栏： Java 文章标签： ajaxfileupload spring MVC 复杂参数

本文链接：https://blog.csdn.net/JodenHe/article/details/80999865

版权

Java 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

介绍

由于 spring boot 集成了 spring MVC ，因此本文使用了 spring boot 去演示该例子。

支持复杂参数传输

实现思路

先对将参数转换成 input 标签隐藏在 form 表单中；
使用 ajax 模拟表单提交;
spring MVC 后台接收数据解析。

实现效果图

实现步骤

构造后台要接收的对象数据

var student = {
                'id' : 1,
                'name': 'Joden_He',
                'subjectList' : [
                    {
                        'id': 1,
                        'name': '语文',
                        'score': 80,
                        'teacher': {
                            'id': 1,
                            'name': '王老师'
                        }
                    },
                    {
                        'id': 2,
                        'name': '数学',
                        'score': 85,
                        'teacher': {
                            'id': 2,
                            'name': '谢老师'
                        }
                    },
                    {
                        'id': 3,
                        'name': '英语',
                        'score': 90
                    }
                ]
        };

前端代码

<form id="upload-form" name="upload-form" method="POST" enctype="multipart/form-data" action="#">
        <input id="upfile" type="file" name="file">
        <!--  隐藏 div 用于存放 js 把对象转换成的 input 标签-->
        <div style="display: none;" id="upfile-add-input"></div>
        <div style="margin-top: 5%">
            <input type="button" onclick="ajaxUpload();" value="提交">
            <input type="reset" value="重置">
        </div>
    </form>

PS： enctype="multipart/form-data" 必要

javascript 代码

        /**
         * @param url 请求路径
         * @param f document.querySelector('#formUpload');
         * @param hideDiv 隐藏的div，用于存放自动生成的input
         * @param params 请求参数
         *
         */
        function ajaxUpload(e) {
             var url = "/upload";
             var f = document.querySelector('#upload-form');
             var params = student;
             var hideDiv = $('#upfile-add-input');
            
             addInput(params, hideDiv);
            // 获取请求参数
            var o = new FormData(f);
            
            // 清空自动生成的input
            //$(hideDiv).html('');
            
            $.ajax({
                'url': url,
                'type': 'POST',
                'data': o,
                'contentType': false,
                'processData': false,
                'success': function (result) {
                    alert(result);
                },
                'error': function() {
                    alert('error');
                }
            });
        }
         
        /**
         * 将对象转换成 input 存储于隐藏的 div 中
         * @param hideDiv 隐藏的div，用于存放自动生成的input
         * @param params 请求参数
         *
         */
        function addInput(params, hideDiv) {
            $.each(params, function (k, v) {
                if (typeof v == 'object') {
                    var obj = new Object();
                    $.each(v, function(i, v2) {
                        if (typeof i == 'number') {/* 数组时 */
                            var key = k+'['+i+']';
                            obj[key] = v2;
                        } else { /* 普通对象时 */
                            var key = k+'.'+i;
                            obj[key] = v2;
                        }
                    });
                    v = obj;
                    addInput(v,hideDiv);
                } else {
                    if (v) {
                        if (v instanceof Date) {
                            $(hideDiv).append('<input name="' + k + '" value="' + v.Format("yyyy-MM-dd hh:mm:ss") + '">');
                        } else {
                            $(hideDiv).append('<input name="' + k + '" value="' + v + '">');
                        }
                    }
                }
            });
        }

后台代码

package com.joden.ajaxfileupload.web;

import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import lombok.Data;

/**
 * controller
 * 
 * @author Jodenhe create on 2018年7月11日 上午11:01:21
 */
@Controller
public class IndexController {

    /**
     * 首页
     * 
     * @return
     */
    @RequestMapping({ "", "/", "/index", "index.html" })
    public String index() {
        return "index";
    }

    /**
     * 文件上传以及参数获取
     * 
     * @return
     */
    @RequestMapping("/upload")
    @ResponseBody
    public String upload(Student student, @RequestParam("file") MultipartFile file) {
        System.out.println(student);
        System.out.println(file.getOriginalFilename());
        return "success";
    }

    // 内部 dto
    // 学生
    @Data // ide 需要安装 lombok 插件，用于生成getter setter 以及 toString 方法
    public static class Student {
        private Long id;
        private String name;
        private List<Subject> subjectList;
    }

    // 科目
    @Data
    public static class Subject {
        private Long id;
        private Integer score;
        private String name;
        private Teacher teacher;
    }

    // 老师
    @Data
    public static class Teacher {
        private Long id;
        private String name;
    }

}