一.了解相关知识。

(1)MultipartResolver 处理文件上传
(2)FormData API

二.导入jar包

ssm框架jar包

三.前端代码样例

(1)html代码:

<body>
    <div id="app">
        <form id="myForm" enctype="multipart/form-data">
            <input type="file" name="files" ref="input1"><br/>
            <input type="file" name="files" ref="input2"><br/>
            年龄: <input type="text" name="name"><br/>
            age:<input type="text" name="age"><br/>
            email:<input type="text" name="email"><br/>
            id:<input type="text" name="id"><br/>
            <input type="button" @click="submit" value="提交">
        </form>
    </div>
</body>

(2)JavaScript:

 const app = new Vue({
        el: "#app",
        data: {
        },
        methods:{
            submit:function (e){
                const form = document.getElementById("myForm");

                const formData = new FormData(form);
                console.log(formData.getAll("files")); //该方法与append方法相对应
                $.ajax({
                    url:'',
                    type:"post",
                    data:formData,
                    contentType:false,
                    processData: false,
                    success: function(respond){
                        console.log(respond)
                    },
                    error: function(message){
                    }
                })
            },
        }
    });

注意: contentType和processData都设置为false。enctype设置可有可无。

四.controller代码

@RequestMapping(value = "/upload.do")
@ResponseBody
    public String upload(MultipartFile[] files, HttpServletRequest request, Student student){
        String ans = "hello";
        System.out.println("student: " + student);
        System.out.println("uploading...");
        if(files!=null && files.length > 0){
            for(MultipartFile file: files){
                System.out.println("create file: " + file.getOriginalFilename());
                String path = request.getServletContext().getRealPath("upload");
                System.out.println(path);

                File directory = new File(path);
                if (!directory.exists()){
                    System.out.println("directory not exists");
                    directory.mkdirs();
                }

                String name = file.getOriginalFilename();
                File destFile = new File(path,name);
                try {
                    file.transferTo(destFile);
                } catch (IllegalStateException | IOException e) {
                    e.printStackTrace();
                    ans = "error";
                }
            }
        }

        return ans;
    }

注意： MultipartFile数组的名字要与上传文件的标签名一样(这里都为files)

Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

嵌入式作业（七）：基于Ardunio的STM32串口通信

嵌入式作业（七）0作业要求1Ardunio 完成STM32的串口通信（1）安装Ardunio IDE（2）stm32串口通信2关于 stduino IDE0作业要求安装 Ardunio IDE 和相关软件支持库，在Ardunio 完成STM32板子的串口通信程序：（1）持续向串口输出“Hello world！”；（2）当接收到“stop!”时，停止输出。网上有一个国人版的MCU集成开发平台， st

avatar CSDN学习社区

JDBC详解

JDBC文章目录JDBC什么是JDBC?JDBC驱动程序:Java使用JDBC访问数据库的步骤:设置classpath:Oracle连接字符串的书写格式:简单的例子:常用数据库的驱动程序及JDBC URL:Oracle数据库:SQL Server数据库MySQL数据库Access数据库PreparedStatement接口:JNDI-数据源（Data Source）与连接池（Connection

avatar CSDN学习社区

“模式识别与机器学习”学习笔记no2.再谈感知机

接**上篇：上篇主要进行了PLA，Pocket算法的理论过程分析和在给定数据集上利用pocket算法对数据集进行分类学习，得到错分数量最少的分类面。上篇中pocket算法的过程已经进行了编程和测试，框架已经建立了起来，这一篇主要上篇中没有提到或涉及不深的几个问题。1.数据集的构造。上篇是直接使用了题目给的向量，这次来根据正态分布来产生数据集。np.random.normal函数可以根据均值和方差生

avatar CSDN学习社区