前臺
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 "";
}
記錄一下 不喜勿噴。