java web学习笔记：springmvc处理表单(包含多文件)上传

最新推荐文章于 2023-10-02 11:50:24 发布

strcpy_s

最新推荐文章于 2023-10-02 11:50:24 发布

阅读量284

点赞数 2

分类专栏： java web初学笔记 html学习笔记

本文链接：https://blog.csdn.net/strcpy_s/article/details/119714786

版权

java web初学笔记同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

html学习笔记

4 篇文章 0 订阅

订阅专栏

二.导入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;
    }