一、前端頁面
1、html
(1)設定input 的type型別為file，代表 用于檔案上傳，
(2)accept屬性，它規定能夠通過檔案上傳進行提交的檔案型別，accept值是 MIME 型別串列，多個型別之間用逗號隔開
(3)multiple 屬性是 HTML5 中的新屬性，屬性規定輸入欄位可選擇多個值，多檔案上傳
<div >
<input id="addFile" type="file" multiple="multiple" accept="application/msword,application/vnd.ms-works,text/plain,application/pdf,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.wordprocessingml.document"><br>
</div>
2、js
add: function () { var file = document.getElementById("addFile").files[0]; if (file == null) { toastr.error('請上傳檔案'); return false; } // 創建form物件 var param = new FormData(); // 通過append向form物件添加資料 param.append('file', file); param.append('token', $('#token').val()); // 上傳需要將對應的檔案型別上傳的資料庫 param.append('fileType', fileType); $.ajax({ cache: false, type: "POST", url: backbasePath + '/apia/v1/file/uploadFile', data: param, async: true, contentType: false, processData: false, success: function (data) { data = eval("(" + data + ")"); if ('000000' == data.code) { toastr.success(data.msg); //上傳成功之后清楚掉之前選擇的檔案 $("#addFile").val(""); // 上傳成功之后進行table的重新加載 $('#filesList').DataTable().ajax.reload(); } else if ('900000' == data.code) { toastr.error('上傳失敗！'); } else { toastr.error(data.msg); } $("#upload").modal('hide'); }, error: function () { toastr.error('上傳失敗！'); $("#upload").modal('hide'); } }); },
二、后端代碼
// 上傳檔案 @RequestMapping("/uploadFile") public Object upload(HttpServletRequest request, @RequestParam(required = false) MultipartFile file) { String result = null;if (null != file && !file.isEmpty()) { try { // 檢查檔案大小 long fileSize = file.getSize(); if (fileSize > 1 * 1024 * 1024) { return RequestResponseTool.getJsonMessage(RespCode.repeat, "上傳失敗！上傳的檔案大小超出了1M限制！"); } // 檢查檔案MIME型別 String contentType = file.getContentType(); List<String> types = new ArrayList<String>(); //擴展名 doc dot types.add("application/msword"); //擴展名 docx types.add("application/vnd.openxmlformats-officedocument.wordprocessingml.document"); //擴展名 pdf types.add("application/pdf"); //擴展名 txt types.add("text/plain"); //擴展名 wps types.add("application/vnd.ms-works"); //擴展名 xla xlc xlm xls xlt xlw types.add("application/vnd.ms-excel"); if (!types.contains(contentType)) { return RequestResponseTool.getJsonMessage(RespCode.repeat, "上傳失敗！不允許上傳此型別的檔案！"); } // 獲取原始檔案名 String originalFilename = file.getOriginalFilename(); String path = filePath; path = path + "/upload/";//定義位絕對路徑 File parent = new File(new File(path).getAbsolutePath()); System.out.println("\tparent=" + parent); if (!parent.exists()) { parent.mkdirs(); } Date date = new Date(); SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd"); Map<String, Object> m = new HashMap<String, Object>(); // 根據檔案名稱進行查詢，如果存在則更新否則新增 Map<String, Object> fileMap = knowledgeService.getFileByName(originalFilename); // 如果能查詢出對應的資料,則進行更新操作 if(fileMap !=null && fileMap.size() >0){ String id =fileMap.get("id").toString(); String oldfileName =fileMap.get("file_name").toString(); // 找到之前的檔案，如果存在則洗掉 File oldFile = new File( path+"/"+oldfileName); if (oldFile.exists()) { oldFile.delete(); } // 保存當前的檔案 file.transferTo(new File(parent, oldfileName)); // 更新檔案表中的大小 m.put("id", id); m.put("file_size", fileSize); result = knowledgeService.update(m); } // 如果查不到資料，則進行新增操作 else { // 新檔案名稱 String filename = UUID.randomUUID().toString(); String suffix = ""; int beginIndex = originalFilename.lastIndexOf("."); if (beginIndex != -1) { suffix = originalFilename.substring(beginIndex); } // 執行保存檔案 file.transferTo(new File(parent, filename + suffix)); // 存放的檔案路徑 String file_path = "/upload/" + filename + suffix; //id String knowledgeId = IDCode.knowledgeId + IDTool.getWebUserId() + ""; //檔案表Id String file_id = IDCode.fileId + IDTool.getWebUserId() + ""; //檔案邏輯名稱(和路徑中的名稱保持一致) String file_name = filename + suffix; // 知識資源表中的主鍵 m.put("id", knowledgeId);// 檔案id m.put("file_id", file_id);// 創建時間 m.put("create_time", dateFormat.format(date)); m.put("file_name", file_name); m.put("file_real_name", originalFilename); m.put("file_path", file_path); m.put("file_size", fileSize);
// 執行新增操作 result = knowledgeService.add(m); } return result; } catch (Exception ex) { ex.printStackTrace(); } } return result; }
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/4014.html
標籤：jQuery