同时上传多个文件实现，带进度条（完整代码）

单文件上传

先简单来定义一个表单，注意加enctype=“multipart/form-data”，表示是上传组件

<form enctype="multipart/form-data" id="formData">
    MultipartFile:<input type="file" name="file" id="fileName1"/><br>
    <div id="progress">0%</div>
    <input id="submit" placeholder="提交"/>
</form>

定义js: 可能有的小伙伴会报错 FormData constructor: Argument 1 does not implement interface HTMLFormElement.原因是不能这样写var a = $("#formData");可能这和js底层代码有关，不能适配。不深究。

<script type="text/javascript">
    (function () {
        $("#submit").click(function () {
            upFiles();
        })

        function upFiles() {
            //不能这样写var a = $("#formData");
            var a = document.getElementById("formData");
            //封装成一个表单数据
            var formData = new FormData(a);
            $.ajax({
                //后端接口
                url: 'upFileOne',
                //上传的文件
                data: formData,
                //响应返回的结果类型
                datatype: 'json',
                //下面俩个参数加上
                processData: false,
                contentType: false,
                //异步请求才能显示进度
                async: true,
                //请求方式
                type: 'POST',
                //请求成功后的回调
                success: function (renponse) {
                    console.log("success" + renponse)
                },
                //请求失败后的回调
                error: function (error) {
                    console.log("error" + error)
                },
                //处理上传进度
                xhr: function () {
                    //ajax其实也就是对xhr的封装，这里自己设置底层的xhr
                    var xhr = $.ajaxSettings.xhr();
                    //给上传组件添加监听器 progress固定写法
                    xhr.upload.addEventListener('progress', function (evt) {
                        var loaded = evt.loaded;
                        var total = evt.total;
                        var percent = loaded / total * 100;
                        //显示进度
                        $('#progress').html(percent.toFixed(2) + "%");
                        //toFixed小数位是2位
                    }, false);
                    return xhr;
                }
            })
        }
    })()
</script>

后端用流来接收，没啥好说的。注意自己在c盘下面创建一个a1872文件夹，当然路劲可以改

/**
     * @param
     * @return
     * @function 上传文件，字节是逐个读取的
     */
    @Override
    public Boolean saveFile(MultipartFile multipartFile) {
        String originalFilename = multipartFile.getOriginalFilename();
        String path = "C:/a1872/" + originalFilename;
        FileOutputStream fileOutputStream = null;
        InputStream inputStream = null;
        try {
            inputStream = multipartFile.getInputStream();
            byte[] bytes = new byte[1024];
            int read = 0;
            fileOutputStream = new FileOutputStream(path);
            while (read != -1) {
                read = inputStream.read(bytes);
                fileOutputStream.write(read);
            }
        } catch (IOException e) {
            e.printStackTrace();
            return false;
        } finally {
            try {
                fileOutputStream.close();
                inputStream.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return true;
    }

测试

******************************************************************************************************

多文件上传

从请求中拿到所有的文件，逐个保存就行了。

/**
     * @param
     * @return
     * @function 上传多个文件
     */
    @PostMapping("/upFileMany")
    public String upFile(HttpServletRequest request) {
        //1:把请求转换为，多文件请求
        MultipartRequest multipartRequest = (MultipartRequest) request;
        //2：从中获取多文件上传的fileMap
        Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
        //3：获取多文件
        Collection<MultipartFile> multipartFiles = fileMap.values();
        for (MultipartFile file : multipartFiles) {
            fileI.saveFile(file);
        }
        return "upFileManyHtml";
    }

完整代码链接https://github.com/zhangzihang3/upfiles.git