html多文件上传（springboot）-CFANZ编程社区

一、文件的上传

1、前端html上传文件

（1）html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <script>
        $(function () {
            //使用ajax传输表单内的formdata的文件
            $("#upload").click(function () {

                var files = document.getElementById("file").files;
                //创建FormData对象
                var formdata = new FormData();
                //设置formdata,追加文件数据
                for(var i=0;i<files.length;i++){
                    console.info(files[i].name);
                    formdata.append("file", files[i]);
                }
            
                $.ajax({
                    url: 'http://localhost:8080/upload',
                    type: 'POST',
                    cache: false,
                    data: formdata,
                    //ajax2.0可以不用设置请求头，但是jq帮我们自动设置了，这样的话需要我们自己取消掉
                    processData: false,
                    //取消帮我们格式化数据，是什么就是什么
                    contentType: false,
                    success:function (res) {
                        alert(res);
                    }
                });

            });

            //选择了文件确定后才会触发该事件,将文件名显示到下方
            $("#file").change(function () {
               console.info("change");
                var files = document.getElementById("file").files;
                var names="";
                for(var i=0;i<files.length;i++){
                    names+=files[i].name+"<br>"
                }

                $("#showFileDiv").html(names);

            });


        })

    </script>
</head>
<body>

<!--使用表单提交文件-->
<!-- 可以选择多个文件：multiple="multiple"；accept：设置可选择的文件类型，用“,”分割多种类型 -->
<form id="uploadForm" class="form-inline" enctype="multipart/form-data">
    <input id="file" type="file" class="form-control" name="file" multiple="multiple" accept=".pdf,.zip,.xls,.doc,.txt,.png,.jpg "/>
    <button id="upload" type="button">upload</button>
</form>

<div id="showFileDiv"></div>



</body>
</html>

（2）相比单文件上传,这里主要改了以下几点：

1、对input标签增加属性：multiple="multiple"；，以支持多文件上传
2、对input标签增加属性：accept：".pdf,.zip"设置可选择的文件类型，用“,”分割多种类型。实现简单的文件限制。
3、上传多个文件后，文件封装添加到formdata中后，还可以追加后台所需要的其他数据，在后台使用对应的键进行接收，示例：

//还可以添加后台所需要的其他数据，在后台方法中使用对应的键值即可接收
                formdata.append("title","测试添加标题");
                formdata.append("category","测试添加分类");

4、在使用append方法后，在控制台里只能看到FormData原型，但是对应的键值对已经添加到表单里了，存储的数据并不是以对象属性的方式体现。如果要查看上传的formdata中的数据，可使用以下两种方法：

//查看formdata中的数据
                //这种方法只输出键值
                for (var value of formdata.values()) {
                    console.log(value);
                }
                
                //这种方法分别输出了键以及键值
                for (var [a, b] of formdata.entries()) {
                    console.log(a, b);
                }

5、选择文件后，将文件名显示到下方，首先添加在html页面中添加<div id="showFileDiv"></div>,然后使用语句：

//选择了文件确定后才会触发该事件,将文件名显示到下方，其中file为input标签的id
            $("#file").change(function () {
               console.info("change");
                var files = document.getElementById("file").files;
                var names="";
                for(var i=0;i<files.length;i++){
                    names+=files[i].name+"<br>"
                }

                $("#showFileDiv").html(names);
            });

参考：
FormData 多文件上传input file控件限制上传文件类型

2、springboot后端接收文件

（1）后台代码：

@RequestMapping("/upload")
    public String upload(@RequestParam(value="file",required = false) MultipartFile[] files,
                         HttpServletRequest request,String title,String category)
            throws IllegalStateException, IOException {

        System.out.println("title:"+title);
        System.out.println("category"+category);
        System.out.println("length:"+files.length);

        // 判断上传的文件是否为空
        if (files.length==0) {
            throw new RuntimeException("上传失败！上传的文件为空！");
        }

        File directory = new File("");//设定为当前文件夹
        String parentDir=directory.getAbsolutePath()+"\\uploadFile";
        File parent = new File(parentDir);
        //如果该目录不存在，则使用mkdirs()方法创建多级目录
        if (!parent.exists()) {
            parent.mkdirs();
        }

        for (int i = 0; i < files.length; i++) {
            // 检查每个文件大小，设置单个文件最大上传大小为10MB
            long fileSize = files[i].getSize();
            System.out.println("\tsize=" + fileSize);
            if (fileSize > 10 * 1024 * 1024) {
                throw new RuntimeException("上传失败！上传的文件大小超出了限制！");
            }

            // 获取原始文件名
            String originalFilename = files[i].getOriginalFilename();
            System.out.println("\toriginalFilename=" + originalFilename);
            // 确定最终保存时使用的文件文件名
            String filename = UUID.randomUUID().toString();
            String suffix = "";
            //拼接文件名后缀
            int beginIndex = originalFilename.lastIndexOf(".");
            if (beginIndex != -1) {
                suffix = originalFilename.substring(beginIndex);
            }

            // 执行保存文件
            File dest = new File(parent, filename + suffix);
            files[i].transferTo(dest);

        }


        return "sucess";
    }

（2）有几点需要注意

1、springboot默认上传文件大小限制为1M，如果需要修改，在配置文件application.properties中添加如下语句:

#设置单个文件大小为10M限制，总上传的数据大小也为100M
	spring.servlet.multipart.max-file-size=10MB
	spring.servlet.multipart.max-request-size=10MB

2、在后端接收上传文件时注意@RequestParam("file")要和前端ajax中 formdata.append("file", files[i]);引号中的名称一致，同时可以接收formdata中的其他参数，如代码中添加的title,category。
3、mkdir() 与 mkdirs() 方法的区别：mkdir()是创建子目录，若父目录不存在会创建失败，mkdirs()是创建多级目录,即如果父目录不存在会自动创建。

参考：H5 + input，Formdata，基于springboot多图片与多参数上传前后台交互