kindeditorjava上传图片_KindEditor富文本框编辑器上传图片功能实现，基于java项目...

1. HTML标签与jquery代码

// 编辑富文本框

KindEditor.ready(function(K) {

var editor &＃61; K.create(&＃39;#editor_id&＃39;, {

themeType : "simple",

uploadJson : CONTEXT_PATH &＃43; "transportations/describe/upload",

resizeType : 1,

imageTabIndex : 1,

filterMode : true,

allowPreviewEmoticons : false,

allowImageUpload : true,

allowFileManager : true,

afterBlur : function() {

this.sync();

},

afterUpload : function(url) {

//上传图片后的代码

var image &＃61; "";

insertHtmlAtCaret(image);

},

items : [ &＃39;source&＃39;, &＃39;undo&＃39;, &＃39;redo&＃39;, &＃39;plainpaste&＃39;, &＃39;wordpaste&＃39;, &＃39;clearhtml&＃39;, &＃39;quickformat&＃39;, &＃39;selectall&＃39;, &＃39;fullscreen&＃39;, &＃39;fontname&＃39;, &＃39;fontsize&＃39;, &＃39;|&＃39;, &＃39;forecolor&＃39;,

&＃39;hilitecolor&＃39;, &＃39;bold&＃39;, &＃39;italic&＃39;, &＃39;underline&＃39;, &＃39;hr&＃39;, &＃39;removeformat&＃39;, &＃39;|&＃39;, &＃39;justifyleft&＃39;, &＃39;justifycenter&＃39;, &＃39;justifyright&＃39;, &＃39;insertorderedlist&＃39;,

&＃39;insertunorderedlist&＃39;, &＃39;|&＃39;, &＃39;link&＃39;, &＃39;image&＃39;, &＃39;unlink&＃39;, &＃39;baidumap&＃39;, &＃39;emoticons&＃39; ]

});

});

// 在光标处添加内容

function insertHtmlAtCaret(html) {

var sel, range;

if (window.getSelection) {

sel &＃61; window.getSelection();

if (sel.getRangeAt && sel.rangeCount) {

range &＃61; sel.getRangeAt(0);

range.deleteContents();

var el &＃61; document.createElement("textarea");

el.innerHTML &＃61; html;

var frag &＃61; document.createDocumentFragment(), node, lastNode;

while ((node &＃61; el.firstChild)) {

lastNode &＃61; frag.appendChild(node);

}

range.insertNode(frag);

if (lastNode) {

range &＃61; range.cloneRange();

range.setStartAfter(lastNode);

range.collapse(true);

sel.removeAllRanges();

sel.addRange(range);

}

}

} else if (document.selection && document.selection.type !&＃61; "Control") {

document.selection.createRange().pasteHTML(html);

}

}

2. java后台实现

/**

*

* 富文本框编辑-上传图片

*

* &＃64;param localUrl

* &＃64;return

* &＃64;throws IOException

* &＃64;throws FileUploadException

*/

&＃64;RequestMapping(value &＃61; "upload")

public void uploadImg(HttpServletRequest request, HttpServletResponse response)

{

// 设置Response响应的编码

response.setContentType("text/html; charset&＃61;UTF-8");

// 获取一个Response的Write对象

PrintWriter writer &＃61; null;

try

{

writer &＃61; response.getWriter();

// 文件保存目录路径

String savePath &＃61; request.getServletContext().getRealPath("/") &＃43; "attached/";

// 文件保存目录URL

String saveUrl &＃61; request.getContextPath() &＃43; "/attached/";

// 定义允许上传的文件扩展名

HashMap extMap &＃61; new HashMap();

extMap.put("image", "gif,jpg,jpeg,png,bmp");

// 最大文件大小

long maxSize &＃61; 1000000;

// 判断是否是一个文件

if (!ServletFileUpload.isMultipartContent(request))

{

writer.println(getError("请选择文件。"));

return;

}

// 检查目录upload, 没有则创建一个

File uploadDir &＃61; new File(savePath);

if (!uploadDir.isDirectory())

{

uploadDir.mkdirs();

}

// 检查目录写权限

if (!uploadDir.canWrite())

{

writer.println(getError("上传目录没有写权限。"));

return;

}

String dirName &＃61; request.getParameter("dir");

if (dirName &＃61;&＃61; null)

{

dirName &＃61; "image";

}

if (!extMap.containsKey(dirName))

{

writer.println(getError("目录名不正确。"));

return;

}

// 创建文件夹

savePath &＃43;&＃61; dirName &＃43; "/";

saveUrl &＃43;&＃61; dirName &＃43; "/";

File saveDirFile &＃61; new File(savePath);

if (!saveDirFile.exists())

{

saveDirFile.mkdirs();

}

SimpleDateFormat sdf &＃61; new SimpleDateFormat("yyyyMMdd");

String ymd &＃61; sdf.format(new Date());

savePath &＃43;&＃61; ymd &＃43; "/";

saveUrl &＃43;&＃61; ymd &＃43; "/";

File dirFile &＃61; new File(savePath);

if (!dirFile.exists())

{

dirFile.mkdirs();

}

DefaultMultipartHttpServletRequest servletRequest &＃61; (DefaultMultipartHttpServletRequest) request;

Iterator iterator &＃61; servletRequest.getFileNames();

while (iterator.hasNext())

{

MultipartFile file &＃61; servletRequest.getFile(iterator.next());

String fileName &＃61; file.getOriginalFilename();

// 检查文件大小

if (file.getSize() > maxSize)

{

writer.println(getError("上传文件大小超过限制。"));

return;

}

// 检查扩展名

String fileExt &＃61; fileName.substring(fileName.lastIndexOf(".") &＃43; 1).toLowerCase();

if (!Arrays. asList(extMap.get(dirName).split(",")).contains(fileExt))

{

writer.println(getError("上传文件扩展名是不允许的扩展名。\n只允许" &＃43; extMap.get(dirName) &＃43; "格式。"));

return;

}

// 以时间重新命名文件名

String newFileName &＃61; CommonUtils.newFileName(fileName);

File uploadedFile &＃61; new File(savePath, newFileName);

file.transferTo(uploadedFile);

JSONObject obj &＃61; new JSONObject();

obj.put("error", 0);

obj.put("url", saveUrl &＃43; newFileName);

writer.println(obj.toJSONString());

}

}

catch (Exception e)

{

logger.error("上传文件失败!" &＃43; e.getMessage());

}

finally

{

// 将writer对象中的内容输出

writer.flush();

// 关闭writer对象

writer.close();

}

}

/**

*

* 上传图片-响应错误信息

*

* &＃64;author

* &＃64;param message

* &＃64;return

*/

private String getError(String message)

{

JSONObject obj &＃61; new JSONObject();

obj.put("error", 1);

obj.put("message", message);

return obj.toJSONString();

}

关于KindEditor编辑器&＃xff0c;了解更多请参考官网文档&＃xff1b;