SpringBoot+AJAX多文件上传

最新推荐文章于 2025-09-19 21:03:00 发布

原创最新推荐文章于 2025-09-19 21:03:00 发布 · 921 阅读

3 ·

CC 4.0 BY-SA版权

SpringBoot 同时被 2 个专栏收录

3 篇文章

订阅专栏

FileUpload

1 篇文章

订阅专栏

这篇博客介绍了如何使用jQuery和Ajax实现前端多文件上传，并通过设置AJAX参数避免数据处理，同时在后端使用Spring的@RequestPart注解接收MultipartFile数组。前端通过input.file的multiple属性实现多选，后端则遍历文件并保存到指定路径。整个过程涉及到前端文件选取、FormData对象、Ajax请求及后端文件处理。

实现主要逻辑

1、前端使用jquery获取input.file中文件内容
2、将文件逐个append到FormData()对象中
3、将AJAX属性processData和contentType设置为false
4、后端使用@RequestPart注解和MultipartFile对象接收文件并进行后续操作

前端代码

    <div>
        <input type="file" id="image" multiple /><br />
        <button onclick="upload()">提交</button>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>
        function upload() {
            let url = "http://localhost:8088/index/upload";
            let formData = new FormData();
            let image = $("#image")[0].files;
            for (let item of image) {
                formData.append("files", item);
            }
            $.ajax({
                url: url,
                method: "post",
                processData: false,
                contentType: false,
                data: formData,
                success: (res) => {
                    console.log(res);
                }
            })
        }
    </script>

input.file添加multiple属性开启多文件选择。

在使用jQuery的AJAX方法的时候参数processData默认为true，默认情况下会将发送的数据序列化以适应默认的内容类型application/x-www-form-urlencoded，设置为false表示告诉jQuery不要处理请求数据。

contentType个人认为应该设置为multipart/form-data，但是设置后请求体中的FormData会变成乱码(可能是被jQuery处理了)。而设置为false后查看开发者工具Network时，Content-Type会被自动设置为: multipart/form-data; boundary=----WebKitFormBoundarylAI6z8Sa8jrFjYAM后面多加的一段字符串作用还有待探究。

后端代码

	@PostMapping("/upload")
    public String upload(@RequestPart("files") MultipartFile[] files) throws IOException {
        if (files.length > 0) {
            for (MultipartFile file : files) {
                file.transferTo(new File("/Users/mars/Desktop/"+file.getOriginalFilename()));
            }
        }
        String success = "上传成功";
        return success;
    }