easyui的filebox组件实现多文件上传

html代码

<div class="easyui-panel" title="上传文件" style="width:100%;padding:30px 70px 50px 70px">
            <form id="userForm" name="userForm" enctype="multipart/form-data" method="post">
                <div style="margin-bottom:20px">
                    <input class="easyui-filebox" multiple="multiple" id="file" name="file" data-options="multiple:'TRUE',prompt:'选择文件...',separator:','"
                           style="width:100%"  >
                    <input type="hidden" name="id" value="${ID}">
                </div>
            </form>
            <div>
                <a href="#" class="easyui-linkbutton" style="width:100%" onclick="loadFile()">上传</a>
            </div>
        </div>

js代码

function loadFile() {
        let fileValue = $("#file").filebox('getValue');
        if (fileValue==""){
            $.messager.alert({
                title: '提示',
                msg: "请选择文件",
                icon: 'info'
            });
            return;
        }
        $("#userForm").form('submit', {
            type: "post",  //提交方式
            dataType: 'json',
            url: '${ctx}/factoryengineer/upload', //请求url
            success: function (data) { //提交成功的回调函数
               var data = eval('(' + data + ')');
                $.messager.alert({
                    title: '提示',
                    msg: data.message,
                    icon: 'info'
                });
                $('#file').filebox('clear');//清空
            }
        });
    }

后台接收
controller

/** * 文件上传 * * @return */
    @RequestMapping(value = "/upload", produces = "application/json; charset=utf-8")
    @ResponseBody
    public String upload(MultipartHttpServletRequest  multipartHttpServletRequest, HttpServletRequest request) throws IOException {
        String id = request.getParameter("id");
        List<MultipartFile> multipartFiles = MultipartFileUtil.listMultipartFiles(multipartHttpServletRequest);
        psFactoryService.Upload(multipartFiles,id);
        return success("ok");
    }

service

//从配置文件获取文件上传路径
    @Value("${file.upload.path}")
    private String fileUploadPath;
	
	//循环遍历多个文件，并设置文件夹名称，而后工具类上传，最后保存到附件表中
	public void Upload(List<MultipartFile> multipartFiles,String id) throws IOException {
        for(MultipartFile multipartFile : multipartFiles) {
            String dir = "/factory-engineer/";
            String fileNames = fileUpload( multipartFile, fileUploadPath + dir);
            attachmentService.saveAttachment(id,"PS_FACTORY",dir,fileNames);
        }

FileUploadUtils

/** * 文件上传 * * @param multipartFile * @return * @throws IOException */
    public static String fileUpload(MultipartFile multipartFile, String filePath) throws IOException {
        // 判断上传的文件是否为空
        if (multipartFile != null) {

            // 判断文件大小
            if (multipartFile.getSize() >= (50 * 1024 * 1024)) {
                log.info("抱歉，仅支持50M之内的文件上传:(");
                return "";
            }
            //文件原名称
            String fileName = multipartFile.getOriginalFilename();
            // 判断文件类型
            String fileType = fileName != null && fileName.contains(".") ? fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length()) : null;
            // 判断文件类型是否为空
            if (StringUtils.isNotBlank(fileType)) {
                // 自定义的文件名称
                fileName = fileName.substring(0, fileName.lastIndexOf("."));
                String trueFileName = fileName + "_" + String.valueOf(System.currentTimeMillis()) + "." + fileType;
                // 设置存放图片文件的路径
                filePath += trueFileName;
                // 转存文件到指定的路径
                File file = new File(filePath);
                if (!file.exists()) {
                    file.mkdirs();
                }
                multipartFile.transferTo(file);
                log.info("上传成功");
                return trueFileName;
            } else {
                log.info("文件类型为空");
            }
        } else {
            log.info("没有找到相对应的文件");
        }
        return null;
    }