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;
    }

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值