(原) Bootstrap 視覺化HTML編輯器,summernote 圖片上傳到伺服器磁碟
阿新 • • 發佈:2019-01-07
前臺
記錄一下 不喜勿噴。
html <div id="editor" class="col-sm-8"></div> js //載入編輯器 $(document).ready(function () { //型別下拉框值 var sType = ""; $("#type").change(function () { sType = $("#type").val(); }); $('#editor').summernote({ height: 400, minHeight: 300, maxHeight: 500, focus: true, lang: 'zh-CN', // 重寫圖片上傳 callbacks: { onImageUpload: function (files, editor, $editable) { sendFile(files[0], editor, $editable); } } }); //儲存 $("#save_button").click(function () { if ($('#editor').summernote('code').length < 20000) { $.ajax({ url: "/*", type: "POST", dataType: "json", data: { title: $("#title").val(), publishPerson: $("#publishPerson").val(), content: $('#editor').summernote('code'), publishTypeId: publishTypeId, type: sType, remark: $("#remark").val() }, success: function (result) { if (result > 0) layer.alert("釋出成功!"); else layer.alert("釋出失敗!"); } }); } else { layer.alert("內容超過長度限制!"); } }) }); //圖片上傳 function sendFile(file, editor, $editable) { var filename = false; try { filename = file['name']; } catch (e) { filename = false; } if (!filename) { $(".note-alarm").remove(); } //以上防止在圖片在編輯器內拖拽引發第二次上傳導致的提示錯誤 data = new FormData(); data.append("file", file); data.append("key", filename); //唯一性引數 $.ajax({ data: data, type: "POST", url: "/*", //後臺圖片上傳地址 cache: false, dataType : "json", contentType: false, processData: false, success: function (url) { var path = url.path; $('#editor').summernote('insertImage', url.path, filename); }, error: function () { alert("上傳失敗!"); } }); }
後臺
@RequestMapping(value = "/upload", produces = "text/html;charset=UTF-8") @ResponseBody public String addFile(HttpServletRequest request) throws Exception { Map<String, Object> map = new HashMap<String, Object>(); CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver( request.getSession().getServletContext()); if (multipartResolver.isMultipart(request)) { MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request; Iterator<String> iter = multiRequest.getFileNames(); while (iter.hasNext()) { MultipartFile file = multiRequest.getFile(iter.next()); if (file != null) { String myFileName = file.getOriginalFilename(); if (myFileName.trim() != "") { String fileName = file.getOriginalFilename(); String fileBaseName = fileName.substring(0, fileName.lastIndexOf(".")); String fileExt = fileName.substring( fileName.lastIndexOf(".") + 1).toLowerCase(); SimpleDateFormat df = new SimpleDateFormat( "yyyyMMddHHmmss"); String newFileName = df.format(new Date()); String fileNames = newFileName + new Random().nextInt(1000) + "." + fileExt; String filePath = request.getSession().getServletContext() .getRealPath("/") + "\\upload\\" + fileNames; File localFile = new File(filePath); if (!localFile.exists()) {// 如果資料夾不存在,自動建立 localFile.mkdirs(); } file.transferTo(localFile); fileNames = "*" + fileNames; //* == 前臺讀取檔案方式路徑 map.put("name", fileBaseName); map.put("path", fileNames); ObjectMapper mapper = new ObjectMapper(); String json = mapper.writeValueAsString(map); return json; } } } } return ""; }
記錄一下 不喜勿噴。