summernote图片的删除
1.HTML界面引入summernote样式
代码如下:
<th:block th:include="include :: summernote-css"/>
<input name="xzms" id="xzms" th:field="*{xzms}" type="hidden">
<div id="editor" class="summernote"></div>
2.javascript实现
代码如下:
<th:block th:include="include :: summernote-js"/>
$(function() {
$('.summernote').summernote({
placeholder: '现状描述',
height : 192,
lang : 'zh-CN',
followingToolbar: false,
callbacks: {
onImageUpload: function (files) {
sendFile(files[0], this);
},
onMediaDelete: function(target) {
deleteFile(target);
}
}
});
//下面两行代码实现回显
var xzms = $("#xzms").val();
$('#editor').summernote('code', xzms);
});
//删除图片
function deleteFile(target) {
var deleteImg = target[0].currentSrc;
var data = new FormData();
data.append("deleteImg",deleteImg);
$.ajax({
data: data,
type: "POST",
url: ctx + "common/removeFile",
cache: false,
contentType: false,
processData: false,
success: function(data){
console.log(data);
},
error: function(error) {
$.modal.alertWarning("图片删除失败");
}
});
}
3.控制层的实现
/**
* 通用文件删除
* */
@PostMapping("/removeFile")
@ResponseBody
public AjaxResult removeFile(@RequestParam("deleteImg") String deleteImg)throws Exception
{
try{
boolean b = FileUtils.deleteFile(deleteImg);
AjaxResult ajax = AjaxResult.success();
ajax.put("filePath",deleteImg);
ajax.put("status",b);
return ajax;
}
catch (Exception e){
return AjaxResult.error(e.getMessage());
}
}