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', //请求urlsuccess: 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")@ResponseBodypublic 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;}