KindEditor之本地圖片上傳

       今日整合某項目的博客發表功能，須要用到在線編譯器，在網上搜索了一大堆後決定採用ckeditor+ckfinder，可是使用過程當中發現此插件太大，且自定義，權限方面的配置工做過於複雜，加之國內中文幫助文檔較少，因此最後仍是棄了ck用了ke。

廢話不說了，進入正題

一，先去KindEditor下載http://www.kindsoft.net/相應包，若是你項目使用的是jsp記得將jsp/lib下的內容加入到你的項目中，具體怎麼操做就不一步一步詳解了，直接總結問題。

二， 整合出現的問題：

1，KindEditor對象未定義

解決方法：

這個確定是你引入kindeditor.js時，路徑有問題或js加載順序的問題

2，圖片上傳路徑問題

解決方法：

修改此段

//文件保存目錄路徑（改爲本身的路徑）
String savePath = pageContext.getServletContext().getRealPath("/") + "blogimage/";

//文件保存目錄URL（改爲本身的url）
String saveUrl  = request.getContextPath() + "/blogimage/";

3，上傳本地圖片時沒有寫入權限

緣由：這個是因爲webxml中的過濾器

 

<filter>
  <filter-name>struts2</filter-name>
  <filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>
 </filter>

   <filter-mapping>
  <filter-name>struts2</filter-name>
  <url-pattern>*.jsp</url-pattern>
 </filter-mapping>

解決辦法：

若是你項目中*.jsp能夠改爲*.action,那你就只須要重寫upload_json.jsp便可；

upload_json.jsp代碼重寫以下，出處（http://www.kindsoft.net/view.php?bbsid=7&postid=2561&pagenum=3）：

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
　　　　<%@ page import="java.util.*,java.io.*"%>
　　　　<%@ page import="java.text.SimpleDateFormat"%>
　　　　<%@ page import="org.apache.commons.fileupload.*"%>
　　　　<%@ page import="org.apache.commons.fileupload.disk.*"%>
　　　　<%@ page import="org.apache.commons.fileupload.servlet.*"%>
　　　　<%@ page import="com.opensymphony.xwork2.ActionContext"%>
　　　　<%@ page import="org.apache.struts2.dispatcher.multipart.MultiPartRequestWrapper"%>
　　　　<%@ page import="org.json.simple.*"%>

　　　　<%
　　　　　　　　//文件保存目錄路徑 img_upload是服務器存儲上傳圖片的目錄名
　　　　　　　　String savePath = request.getSession().getServletContext().getRealPath("/")+ "img_upload/";

　　　　　　　　//文件保存目錄URL
　　　　　　　　String saveUrl = request.getContextPath() + "/img_upload/";

　　　　　　　　//定義容許上傳的文件擴展名
　　　　　　　　String[] fileTypes = new String[] { "gif", "jpg", "jpeg", "png","bmp" };

　　　　　　　　//容許最大上傳文件大小
　　　　　　　　long maxSize = 1024000;

　　　　　　　　//Struts2 請求 包裝過濾器
　　　　　　　　MultiPartRequestWrapper wrapper = (MultiPartRequestWrapper) request;

　　　　　　　　//得到上傳的文件名
　　　　　　　　String fileName = wrapper.getFileNames("imgFile")[0];

　　　　　　　　//得到文件過濾器
　　　　　　　　File file = wrapper.getFiles("imgFile")[0];

　　　　　　　　//獲得上傳文件的擴展名
　　　　　　　　String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();

　　　　　　　　//檢查擴展名
　　　　　　　　if (!Arrays.<String> asList(fileTypes).contains(fileExt)) {
　　　　　　　　 out.println(getError("上傳文件擴展名是不容許的擴展名。"));
　　　　　　　　 return;
　　　　　　　　}
　　　　　　　　//檢查文件大小
　　　　　　　　if (file.length() > maxSize) {
　　　　　　　　 out.println(getError("上傳文件大小超過限制。"));
　　　　　　　　 return;
　　　　　　　　} 

　　　　　　　　//檢查目錄
　　　　　　　　File uploadDir = new File(savePath);
　　　　　　　　if (!uploadDir.isDirectory()) {
　　　　　　　　 out.println(getError("上傳目錄不存在。"));
　　　　　　　　 return;
　　　　　　　　}
　　　　　　　　//檢查目錄寫入權限
　　　　　　　　if (!uploadDir.canWrite()) {
　　　　　　　　 out.println(getError("上傳目錄沒有寫入權限。"));
　　　　　　　　 return;
　　　　　　　　}

　　　　　　　　//重構上傳圖片的名稱 
　　　　　　　　SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
　　　　　　　　String newImgName = df.format(new Date()) + "_"+ new Random().nextInt(1000) + "." + fileExt;

　　　　　　　　//設置 KE 中的圖片文件地址
　　　　String newFileName = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()
　　　　　　　　+ saveUrl + newImgName;

　　　　　　　　byte[] buffer = new byte[1024];

　　　　　　　　//獲取文件輸出流
　　　　　　　　FileOutputStream fos = new FileOutputStream(savePath + newImgName);

　　　　　　　　//獲取內存中當前文件輸入流
　　　　　　　　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", saveUrl + newImgName);
　　　　　　　　out.println(obj.toJSONString());
　　　　　　　　%>
　　　　　　　　<%!private String getError(String message) {
　　　　　　　　 JSONObject obj = new JSONObject();
　　　　　　　　 obj.put("error", 1);
　　　　　　　　 obj.put("message", message);
　　　　　　　　 return obj.toJSONString();
　　　　　　　　}
　　　　　　　　%>

 

          爲何須要重寫upload_json.jsp，是由於structs2對request進行了包裝，致使頁面中的file對象爲空，因此咱們須要使用到MultiPartRequestWrapper 進行處理，具體過程可查看它的源碼及實現過程。

         由於我項目中使用到了structs2的標籤，因此不加*.jsp的過濾器則會致使項目中的structs2的標籤沒法正常使用。

所以上面的解決方法不適用於個人項目，項目中惟一的解決方法是將upload_json.jsp重寫成servlet或structs2的action，重寫過程當中會用到response.getWriter().println(str)

若有錯誤之處，請各位大俠賜教

可提供ckeditor+ckfinder整合的簡單demo，須要可留言

我的博客網站：www.fuzhicode.com

愛泡泡優惠券網站：www.shaobingquan.com，提供淘寶，天貓購物優惠券