CKEditor圖片上傳實現詳細步驟(使用Struts 2)

本人使用的 CKEditor 版本是 3.6.3 。 CKEditor 配置和部署我就不多說。

CKEditor的編輯器工具欄中有一項“圖片域”，該工具可以貼上圖片地址來在文本編輯器中加入圖片，但是沒有圖片上傳。

“預覽”中有一大堆鳥語，看得很不爽。可以打開ckeditor/plugins/image/dialogs/image.js文件，搜索“b.config.image_previewText”就能找到這段鳥語了，(b.config.image_previewText||'')單引號中的內容全刪了，注意別刪多了。

掃除這個障礙，下面來研究圖片上傳。

step 1：

首先，還是image.js這個文件，搜索“upload”可以找到這一段

id:'Upload',hidden:true

實際上上傳功能被隱藏了，把上面的true改成false，再打開編輯器，就能找到上傳功能了。

step 2：

上面的只是一個上傳頁面。也就相當於一個HTML的form表單，要配置點擊“上傳到服務器上”按鈕后請求的Action。可以在ckeditor/config.js中配置。

加入：

config.filebrowserUploadUrl="actions/ckeditorUpload";

"ckeditorUpload"是請求的URL，也就是點擊這個按鈕就會post到ckeditorUpload地址進行處理，這里指向的是Struts 2的一個Action。當然，也可以用servlet或者ASP、PHP等來處理請求。

 <package name="actions" extends="struts-default" namespace="/actions">
   <action name="ckeditorUpload" class="com.xxx.CkeditorUpload ">
   </action>
 </package>

step 3：

文件上傳的控件相當於<input  type="file" name="upload" .../>，其name是”upload”，知道了name那么就可以在Action中獲取這個文件。

 private File upload;  //文件
 private String uploadContentType;  //文件類型
 private String uploadFileName;   //文件名

以上三個私有變量都要有set方法。如果不了解的話可以先學習一下Struts 2文件上傳。

step 4：

如果上傳的圖片格式不正確，可以在上傳界面進行提示。

這個提示不是ckeditor提示的，要在Action中響應。

 String callback = ServletActionContext.getRequest().getParameter("CKEditorFuncNum");
 if([判斷條件]){
     out.println("<script type=\"text/javascript\">");
     out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",''," + "'文件格式不正確（必須為.jpg/.gif/.bmp/.png文件）');");
     out.println("</script>");
     return null;
 }

step 5：

 InputStream is = new FileInputStream(upload);
 String uploadPath = ServletActionContext.getServletContext().getRealPath("/img/postImg");
 String fileName = java.util.UUID.randomUUID().toString();  //采用UUID的方式隨即命名
 fileName += expandedName;  // 加上后綴名
 File toFile = new File(uploadPath, fileName);
 OutputStream os = new FileOutputStream(toFile);
 byte[] buffer = new byte[1024];
 int length = 0;
 while ((length = is.read(buffer)) > 0) {
     os.write(buffer, 0, length);
 }
 is.close();
 os.close();

這段代碼是Struts 2上傳圖片的核心代碼，把圖片上傳后保存在項目的某個目錄下，並隨機重命名。

step 6：

圖片上傳成功，在目錄下也可以看到圖片，至此圖片上傳成功。但是如何將圖片發到編輯器中呢？

點“確定”按鈕會有以下提示。

到這里，要在Action中返回一段JS腳本。

 String callback =ServletActionContext.getRequest().getParameter("CKEditorFuncNum");
 out.println("<script type=\"text/javascript\">");
 out.println("window.parent.CKEDITOR.tools.callFunction("+ callback + ",'" +"img/postImg/"+ fileName + "','')");
 out.println("</script>");

有了這段代碼，圖片上傳成功后，根據這里的

"img/postImg/" + filename

相對地址，就可以使用這個圖片，直接轉到“圖像”頁面。

附：Struts 2 Action代碼

 package com.xxg.bbs.action;

 import java.io.File;
 import java.io.FileInputStream;
 import java.io.FileOutputStream;
 import java.io.InputStream;
 import java.io.OutputStream;
 import java.io.PrintWriter;

 import javax.servlet.http.HttpServletResponse;

 import org.apache.struts2.ServletActionContext;

 import com.opensymphony.xwork2.ActionSupport;

 public class CkeditorUpload extends ActionSupport {

     private File upload;
     private String uploadContentType;
     private String uploadFileName;


     public File getUpload() {
         return upload;
     }

     public void setUpload(File upload) {

         this.upload = upload;
     }

     public String getUploadContentType() {
         return uploadContentType;
     }

     public void setUploadContentType(String uploadContentType) {
         this.uploadContentType = uploadContentType;
     }

     public String getUploadFileName() {
         return uploadFileName;
     }

     public void setUploadFileName(String uploadFileName) {
         this.uploadFileName = uploadFileName;
     }

     public String execute() throws Exception {

         HttpServletResponse response = ServletActionContext.getResponse();
         response.setCharacterEncoding("GBK");
         PrintWriter out = response.getWriter();

         // CKEditor提交的很重要的一個參數
         String callback = ServletActionContext.getRequest().getParameter("CKEditorFuncNum");

         String expandedName = "";  //文件擴展名
         if (uploadContentType.equals("image/pjpeg") || uploadContentType.equals("image/jpeg")) {
             //IE6上傳jpg圖片的headimageContentType是image/pjpeg，而IE9以及火狐上傳的jpg圖片是image/jpeg
             expandedName = ".jpg";
         }else if(uploadContentType.equals("image/png") || uploadContentType.equals("image/x-png")){
             //IE6上傳的png圖片的headimageContentType是"image/x-png"
             expandedName = ".png";
         }else if(uploadContentType.equals("image/gif")){
             expandedName = ".gif";
         }else if(uploadContentType.equals("image/bmp")){
             expandedName = ".bmp";
         }else{
             out.println("<script type=\"text/javascript\">");
             out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",''," + "'文件格式不正確（必須為.jpg/.gif/.bmp/.png文件）');");
             out.println("</script>");
             return null;
         }

         if(upload.length() > 600*1024){
             out.println("<script type=\"text/javascript\">");
             out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",''," + "'文件大小不得大於600k');");
             out.println("</script>");
             return null;
         }


         InputStream is = new FileInputStream(upload);
         String uploadPath = ServletActionContext.getServletContext()
                 .getRealPath("/img/postImg");
         String fileName = java.util.UUID.randomUUID().toString();  //采用時間+UUID的方式隨即命名
         fileName += expandedName;
         File toFile = new File(uploadPath, fileName);
         OutputStream os = new FileOutputStream(toFile);
         byte[] buffer = new byte[1024];
         int length = 0;
         while ((length = is.read(buffer)) > 0) {
             os.write(buffer, 0, length);
         }
         is.close();
         os.close();

         // 返回“圖像”選項卡並顯示圖片
         out.println("<script type=\"text/javascript\">");
         out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + "img/postImg/" + fileName + "','')");
         out.println("</script>");

         return null;
     }
 }