url: http://blog.csdn.net/xiao__gui/article/details/7684505
本人使用的CKEditor版本是3.6.3。CKEditor配置和部署我就不多說。
CKEditor的編輯器工具欄中有一項“圖片域”，該工具可以貼上圖片地址來在文本編輯器中加入圖片，但是沒有圖片上傳。
“預覽”中有一大堆鳥語，看得很不爽。可以打開ckeditor/plugins/image/dialogs/image.js文件，搜索“b.config.image_previewText”就能找到這段鳥語了，(b.config.image_previewText||'')單引號中的內容全刪了，注意別刪多了。
掃除這個障礙，下面來研究圖片上傳。
1.首先，還是image.js這個文件，搜索“upload”可以找到這一段
id:'Upload',hidden:true
實際上上傳功能被隱藏了，把上面的true改成false，再打開編輯器，就能找到上傳功能了。
2.上面的只是一個上傳頁面。也就相當于一個HTML的form表單，要配置點擊“上傳到服務器上”按鈕后請求的Action。可以在ckeditor/config.js中配置。
加入：
config.filebrowserUploadUrl="actions/ckeditorUpload";
var pathName = window.document.location.pathname;
//獲取帶"/"的項目名，如：/uimcardprj
var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
config.filebrowserImageUploadUrl = projectName+'/system/upload.do'; //固定路徑
"ckeditorUpload"是請求的URL，也就是點擊這個按鈕就會post到ckeditorUpload地址進行處理，這里指向的是Struts 2的一個Action。當然，也可以用servlet或者ASP、PHP等來處理請求。
3.文件上傳的控件相當于<input type="file" name="upload" .../>，其name是”upload”，知道了name那么就可以在Action中獲取這個文件。
private File upload; //文件
private String uploadContentType; //文件類型
private String uploadFileName; //文件名
以上三個私有變量都要有set方法。如果不了解的話可以先學習一下Struts 2文件上傳。
4.如果上傳的圖片格式不正確，可以在上傳界面進行提示。
這個提示不是ckeditor提示的，要在Action中響應。
HttpServletResponse response =ServletActionContext.getResponse();
response.setCharacterEncoding("GBK");
PrintWriter out = response.getWriter();
if(???){
out.print("<font color=\"red\"size=\"2\">*文件格式不正確（必須為.jpg/.gif/.bmp/.png文件）</font>");
return null;
}
5.
InputStream is = newFileInputStream(upload);
String uploadPath = ServletActionContext.getServletContext().getRealPath("/img/postImg"); //設置保存目錄
String fileName =java.util.UUID.randomUUID(); //采用UUID的方式隨機命名
fileName+= uploadFileName.substring(uploadFileName.length() - 4);
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上傳圖片的核心代碼，把圖片上傳后保存在項目的某個目錄下，并隨機重命名。
6.圖片上傳成功，在目錄下也可以看到圖片，至此圖片上傳成功。但是如何將圖片發到編輯器中呢？
點“確定”按鈕會有以下提示。
到這里，要在Action中加入一段JS。
String callback =ServletActionContext.getRequest().getParameter("CKEditorFuncNum");
out.println("<scripttype=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction("+ callback + ",'" +"img/postImg/"+ fileName + "','')");
out.println("</script>");
有了這段代碼，圖片上傳成功后，根據這里的
"img/postImg/" + filename
相對地址，就可以使用這個圖片，直接轉到“圖像”頁面。
附：Struts 2 Action代碼
- 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();
-
-
- //對文件進行校驗
- if(upload==null || uploadContentType==null || uploadFileName==null){
- out.print("<font color=\"red\" size=\"2\">*請選擇上傳文件</font>");
- return null;
- }
-
- if ((uploadContentType.equals("image/pjpeg") || uploadContentType.equals("image/jpeg"))
- && uploadFileName.substring(uploadFileName.length() - 4).toLowerCase().equals(".jpg")) {
- //IE6上傳jpg圖片的headimageContentType是image/pjpeg，而IE9以及火狐上傳的jpg圖片是image/jpeg
- }else if(uploadContentType.equals("image/png") && uploadFileName.substring(uploadFileName.length() - 4).toLowerCase().equals(".png")){
-
- }else if(uploadContentType.equals("image/gif") && uploadFileName.substring(uploadFileName.length() - 4).toLowerCase().equals(".gif")){
-
- }else if(uploadContentType.equals("image/bmp") && uploadFileName.substring(uploadFileName.length() - 4).toLowerCase().equals(".bmp")){
-
- }else{
- out.print("<font color=\"red\" size=\"2\">*文件格式不正確（必須為.jpg/.gif/.bmp/.png文件）</font>");
- return null;
- }
-
- if(upload.length() > 600*1024){
- out.print("<font color=\"red\" size=\"2\">*文件大小不得大于600k</font>");
- return null;
- }
-
- //將文件保存到項目目錄下
- InputStream is = new FileInputStream(upload);
- String uploadPath = ServletActionContext.getServletContext()
- .getRealPath("/img/postImg"); //設置保存目錄
- String fileName = java.util.UUID.randomUUID(); //采用UUID的方式隨機命名
- fileName += uploadFileName.substring(uploadFileName.length() - 4);
- 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();
-
-
- //設置返回“圖像”選項卡
- 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>");
-
-
- return null;
- }
- }
作者：叉叉哥 轉載請注明出處：
http://blog.csdn.net/xiao__gui/article/details/7684505
