编程 |  数据库 |  安全 |  系统 |  服务器 |  嵌入式 |  设计 |  基础 |  组网 |  QQ | 

CKEditor实现图片上传

作者:itmyhome的专栏  发布日期:2013-12-13 22:08:48
  • 收藏本文    我要投稿
  • 本人用的CKEditor版本为4.3 CKEditor配置和部署参考CKEditor4.x部署和配置。 CKEditor编辑器的工具栏中初始的时候应该是这样子的,没有图片上传按钮
    \

    并且预览中有一堆火星文,可以修改相应配置删除它。 第一种方法:打开ckeditor/plugins/image/dialogs/image.js文件,搜索“b.config.image_previewText”,(b.config.image_previewText||'')单引号中的内容全删了,注意别删多了。(由于ckeditor的很多js文件都是压缩过的,格式很难看,很容易删错,所以不推荐此种方法) 第二种方法:打开config.js文件,加入下面一句话 config.image_previewText=' '; //预览区域显示内容

    下面研究图片上传 要想出现上传按钮,两种方法 第一种:还是刚才那个image.js
    搜索“upload”可以找到这一段 id:'Upload',hidden:true,而我使用的4.3的是
    id:"Upload",hidden:!0,反正改为false就行了,(遗憾的是此种方法对我这个版本不起作用) 第二种:打开config.js文件,加入下面一句话 config.filebrowserImageUploadUrl= "admin/UserArticleFileUpload.do"; //待会要上传的action或servlet

    OK现在基本上是下面这个样子的了
    \
    \

    上面的只是一个上传页面。也就相当于一个HTML的form表单, 要配置点击"上传到服务器上"按钮后请求的Action。已在ckeditor/config.js中配置。 就是上面的 config.filebrowserImageUploadUrl = "admin/UserArticleFileUpload.do"; 可使用chrome审查元素查看代码 \


    接下来就是action中的上传方法:
    public class ImageUpload extends WebSupport {
    	private File upload;       //文件
        private String uploadContentType;   //文件类型
        private String uploadFileName;       //文件名
    	/**
    	 * 图片上传
    	 * @return
    	 * @throws IOException 
    	 */
    	public String fileUpload() throws IOException{
    		//HttpServletResponse response = ServletActionContext.getResponse();
            getResponse().setCharacterEncoding("utf-8");
            PrintWriter out =  getResponse().getWriter();  
            // CKEditor提交的很重要的一个参数  
            String callback = 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/uploadImg");  
            String fileName = java.util.UUID.randomUUID().toString();  //采用时间+UUID的方式随即命名  
            fileName += expandedName;  
            File file = new File(uploadPath);
            if(!file.exists()){  //如果路径不存在,创建
            	file.mkdirs();
            }
            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 + ",'" + "/eHomePlus/img/uploadImg" + fileName + "','')");    
            out.println("</script>");  
    		return null;
    	}
    	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;
    	}
    }

    config.js
    CKEDITOR.editorConfig = function( config ) {
        config.filebrowserImageUploadUrl = "admin/UserArticleFileUpload.do"; //固定路径
        config.image_previewText=' '; //预览区域显示内容 
    };

    最后上传图片成功
    \

    PS:不同版本实现的方法与效果可能不太一样,只作参考。

延伸阅读:

Tag标签:CKEditor  实现  图片上传  
  • 专题推荐