ckeditor+struts2实现图片上传功能

最新推荐文章于 2018-08-05 22:39:02 发布

花海残阳

最新推荐文章于 2018-08-05 22:39:02 发布

阅读量273

点赞数

本文链接：https://blog.csdn.net/u011367411/article/details/78928357

版权

1、下载并解压ckeditor到项目的目录下

2、清除预览中的文字显示

第一种方法：打开ckeditor/plugins/image/dialogs/image.js文件，搜索“b.config.image_previewText”，(b.config.image_previewText||'')单引号中的内容全删了，注意别删多了。

第二种方法：打开config.js文件，加入下面一句话

config.image_previewText=' '; //预览区域显示内容

3、打开上传图片中的上传按钮

打开ckeditor/plugins/image/dialogs/image.js文件，搜索并找到这一段 id:'Upload',hidden:true或者叫做id:'Upload',hidden:!0更改为

id:'Upload',hidden:false或者id:'Upload',hidden:0则会看到上传按钮显示出来。

4、JSP页面内容

5、struts2中的配置显示

6、配置按钮“上传服务器”到action的路径

在ckeditor/config.js下配置关联action的路径，增加代码config.filebrowserImageUploadUrl=projectName+"/manage/ckeditorUpload.action";

projectName为项目的相对路径，通过在ckeditor/config.js下增加代码获得：

var curWwwPath=window.document.location.href;
//获取主机地址之后的目录如：/Tmall/index.jsp
var pathName=window.document.location.pathname;
var pos=curWwwPath.indexOf(pathName);
//获取主机地址，如：//localhost:8080
var localhostPaht=curWwwPath.substring(0,pos);
//获取带"/"的项目名，如：/Tmall
var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);

7、设置action

可以通过F12查看插件的路径，它的name是upload：

public class CkeditorUpFileAction extends BaseAction{
/**
*
*/
private static final long serialVersionUID = 4222170565445752625L;
private File upload;//ckeditor在线编辑器中默认的文件名
private String uploadContentType;//struts中默认的属性名文件名+ContentType
private String uploadFileName;//struts中默认的属性名文件名+FileName

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 ckeditorUpload() throws Exception {
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("utf-8");
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("/ckeditorImg");
String fileName = java.util.UUID.randomUUID().toString(); // 采用时间+UUID的方式随即命名
fileName += expandedName;
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
+ ",'" +ServletActionContext.getRequest().getContextPath()+ "/ckeditorImg/" + fileName + "','')");
out.println("</script>");

return null;
}

}