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="${webroot}/plugins/ckeditor/ckeditor.js"></script>
顺序貌似说反了,大概就是这样。这个真心比百度编辑器好用,整合也简单方便。
除非注明转载,其他文章均为作者原创,可以自由转载,但请注明转载的本文的地址,请尊重作者的劳动成果。