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

總結

以上是生活随笔為你收集整理的easyui的filebox组件实现多文件上传的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。