kindeditor图片上传 jsp版

经过了那么长时间的搜索，看了好多有关kindeditor图片上传的东西，各种方法也试过了，但总是报服务器发生障碍，今天终于解决了！！！拿出来给大家分享！！！

首先在官网下载kindeditor压缩包，（我这里用的是kindeditor-3-5-5-zh-CN.zip），解压开，把jsp、plugins、skins、kindeditor.js 、kindedditor-min.js放进自己的项目中（我是放在webroot下面新建的文件夹kindeditor下面的），其他的可以不放。

然后修改image.html，把原来的（php版）改为 var imageUploadJson = (typeof KE.g[id].imageUploadJson == 'undefined') ? '../../jsp/upload_json.jsp': KE.g[id].imageUploadJson; 接着把原来的upload_json.jsp改为如下所示：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@page import="org.apache.struts2.dispatcher.multipart.MultiPartRequestWrapper"%>

<%@page import="java.util.concurrent.locks.*"%><%@page import="java.io.*"%>

<%@ page import="org.json.simple.*"%>

<%

//Struts2 请求 包装过滤器

MultiPartRequestWrapper wrapper=(MultiPartRequestWrapper)request;

//获得上传的文件名

String fileName = wrapper.getFileNames("imgFile")[0];

//获得未见过滤器

File file = wrapper.getFiles("imgFile")[0];

//----------从新构建上传文件名---------

final Lock lock = new ReentrantLock();String newName = null;lock.lock();

try{

//加锁为防止文件名频频

newName = System.currentTimeMillis() +fileName.substring(fileName.lastIndexOf("."), fileName.length());}finally{lock.unlock();}

//获取文件输出流

FileOutputStream fos = new FileOutputStream(request.getSession().getServletContext().getRealPath("/")+"attached/" + newName);//设置 KE 中的图片文件地址

String newFileName = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ request.getContextPath() + "/attached/" + newName;byte[] buffer = new byte[1024];//获取内存中当前文件输入流

InputStream in = new FileInputStream(file);try{int num = 0;while((num = in.read(buffer)) > 0){fos.write(buffer,0,num);}}catch(Exception e){e.printStackTrace(System.err);}finally{in.close();fos.close();}//发送给 KE

JSONObject obj = new JSONObject();

obj.put("error", 0);

obj.put("url", newFileName);

out.println(obj.toJSONString());

%>

其中attached为图片保存的路径，我的位于webroot下面。

再在使用kindeditor编辑器的页面中加入以下代码：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%

request.setCharacterEncoding("UTF-8");

String htmlData = request.getParameter("addtg") != null ? request.getParameter("addtg") : "";

%>

<script type="text/javascript">

KE.show({

id : 'tg',//TEXTAREA输入框的ID

imageUploadJson : '../../jsp/upload_json.jsp', //注意路径别写错！！

fileManagerJson : '../../jsp/file_manager_json.jsp',

allowFileManager : true,

allowUpload : true, //允许上传图片

afterCreate : function(id) {

KE.event.ctrl(document, 13, function() {

KE.util.setData(id);

document.forms['example'].submit();

});

KE.event.ctrl(KE.g[id].iframeDoc, 13, function() {

KE.util.setData(id);

document.forms['example'].submit();

});

}

});

</script>

<textarea id="tg" name="tg" style="width:550px;height:200px;visibility:hidden;"></textarea>

<input type="button" class="button_01" value="保 存" onclick="updateSubmit();">

如此，就可以实现图片上传了！！！希望对大家有用！！同时也作为自己的经验收藏！(*^__^*) 嘻嘻……