1. 云图网首页
  2. 技术专区
  3. 编程笔记

struts2+ckeditor配置图片上传详解编程语言

• 编程笔记

又是一个漫漫长夜。

公司的编辑器坏了，用的是百度编辑器，上传图片的网址被框架给拦截了，我们本地怎么测试都没问题，放到服务器就这样了。和老李找了半天，疯了，没原因的。

笔者以前用过jsp+ckeditor，觉得里面上传功能挺好用，于是想出这个法子，把网站的编辑器换掉。

用的是最新的版本的，4点几的。很有wordpress的感觉，不知道是不是一家的。先预览一下：

struts2+ckeditor配置图片上传详解编程语言

代码：

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>

顺序貌似说反了，大概就是这样。这个真心比百度编辑器好用，整合也简单方便。

 

 

 

原创文章，作者：Maggie-Hunter，如若转载，请注明出处：https://blog.ytso.com/11547.html

赞 (0)
0
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论