CKEditor实现图片上传-飞外

本人用的CKEditor版本为4.3CKEditor配置和部署参考CKEditor4.x部署和配置。CKEditor编辑器的工具栏中初始的时候应该是这样子的,没有图片上传按钮


并且预览中有一堆火星文,可以修改相应配置删除它。面。也就相当于一个HTML的form表单,要配置点击"上传到服务器上"按钮后请求的Action。已在ckeditor/config.js中配置。就是上面的config.filebrowserImageUploadUrl = "admin/UserArticleFileUpload.do";可使用chrome审查元素查看代码
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 "); 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 "); 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 "); 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; }
CKEDITOR.editorConfig = function( config ) {  config.filebrowserImageUploadUrl = "admin/UserArticleFileUpload.do"; //固定路径  config.image_previewText=' '; //预览区域显示内容 };

最后上传图片成功
本文转自:http://blog.csdn.net/itmyhome1990/article/details/17264627参考文章:http://blog.csdn.net/mydwr/article/details/8669594