首页 > 代码库 > struts2+ckeditor配置图片上传
struts2+ckeditor配置图片上传
又是一个漫漫长夜。
公司的编辑器坏了，用的是百度编辑器，上传图片的网址被框架给拦截了，我们本地怎么测试都没问题，放到服务器就这样了。和老李找了半天，疯了，没原因的。
笔者以前用过jsp+ckeditor，觉得里面上传功能挺好用，于是想出这个法子，把网站的编辑器换掉。
用的是最新的版本的，4点几的。很有wordpress的感觉，不知道是不是一家的。先预览一下：
代码：
package 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 util.DateUtil;import com.opensymphony.xwork2.ActionSupport;public class UploadFile 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/upload/"+DateUtil.getDirDate()); System.out.println("uploadpath:"+uploadPath); File dirfile=new File(uploadPath); if(!dirfile.exists()){ dirfile.mkdirs(); } String fileName = DateUtil.getDate(); //采用时间+UUID的方式随即命名 fileName += expandedName; System.out.println("filename:"+fileName); 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/upload/"+ DateUtil.getDirDate() +"/"+ fileName + "‘,‘‘)"); out.println("</script>"); return null; } }
里面用到一个时间的工具类，用于按照时间创建目录和文件名字。文件名字精确到秒，以免发生名称重复。
其中：
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",‘" + "img/upload/"+ DateUtil.getDirDate() +"/"+ fileName + "‘,‘‘)"); 这一句是上传图片后，返回给编辑器的一个图片路径地址。
时间工具类：
package com.util;import java.util.Calendar;public class DateUtil { public static String getDate(){ Calendar calendar=Calendar.getInstance(); int y=calendar.get(Calendar.YEAR); int m=calendar.get(Calendar.MONTH); int d=calendar.get(Calendar.DATE); int h=calendar.get(Calendar.HOUR); int mi=calendar.get(Calendar.MINUTE); int s=calendar.get(Calendar.SECOND); StringBuffer sb=new StringBuffer(""); sb.append(y); sb.append(m+1); sb.append(d); sb.append(h); sb.append(mi); sb.append(s); String date=sb.toString(); return date; } public static String getDirDate(){ Calendar calendar=Calendar.getInstance(); int y=calendar.get(Calendar.YEAR); int m=calendar.get(Calendar.MONTH); int d=calendar.get(Calendar.DATE); StringBuffer sb=new StringBuffer(""); sb.append(y); sb.append(m+1); sb.append(d); String date=sb.toString(); return date; } }
其中很有意思的是，上面获取的月份，比当前月份要少一个月，不知道这个是怎么理解（有人说老外是从0开始计算月份的，呵呵），于是加1代表当前月份。
然后在struts.xml中，配置一个action即可，不需要result，返回为null的。
<action name="uploadfile" class="indexAction" method="uploadfile"> </action>
哦，既然有action，当然要有请求他的。这个请求是点击上传时候发生的，在config.js配置：
//个人的配置 config.filebrowserUploadUrl="/uploadfile.html";在结束前插入这一句。我这里后面是html，是因为url重写的。默认情况就是上面的action name。
然后就是在各个页面引入编辑器框架。
<!-- 插入ckeditor --> <textarea rows="70" cols="80" name="content"></textarea>
还要引入以下这个js：
<script type="text/javascript">CKEDITOR.replace(‘content‘);</script><script type="text/javascript"> window.onload = function() { CKEDITOR.replace( ‘content‘ ); };</script>
最后是在页面头部引入框架的js：
<script type="text/javascript" src="http://www.mamicode.com/${webroot}/plugins/ckeditor/ckeditor.js"></script>顺序貌似说反了，大概就是这样。这个真心比百度编辑器好用，整合也简单方便。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。