毕业设计(十七)---发表文章(3)之- 使用ckeditor上传图片(flash)

最新推荐文章于 2016-02-18 16:21:00 发布

mamba10

最新推荐文章于 2016-02-18 16:21:00 发布

阅读量3.6k

点赞数

分类专栏：毕业设计

本文链接：https://blog.csdn.net/mamba10/article/details/8543219

版权

毕业设计专栏收录该内容

28 篇文章 0 订阅

订阅专栏

例子下载地址!

在发表文章的时候,经常会使用到图片, ckeditor本身提供了这个功能,需要开启,然后再加上自己一些代码.

(上传flash和上传图片的方式一模一样,以图片为例.)

先看效果图:

先浏览服务器:

点击图片即选择

上传:

上传完毕点击确定

图像大小可调节.

实现方式:

一: a: 有关的文件, 在ckeditor文件下添加uploader文件夹,

里面的browse.jsp文件是浏览服务器时候的页面. upload.jsp是点击上传时候进行处理的文件,

但是这里我并没有用到upload.jsp,因为我把其中处理的方法写到了自己定义的类里面,所以upload.jsp可有可无.

b:上传处理的类

里面的内容其实就是upload.jsp的改写.

二:首先修改自定义的ckeditor_config.js 文件,在里面加上浏览服务器和上传图片的处理方法

CKEDITOR.editorConfig = function( config )
{
	config.filebrowserImageUploadUrl = 'actionckeditor.action';//定义图片上传的地址, 是上图的CkeditorUploadAction.java. 
	config.filebrowserImageBrowseUrl = 'ckeditor/uploader/browse.jsp?type=images';  //定义图片的 浏览服务器 窗口.
	
	config.filebrowserFlashUploadUrl = 'actionckeditor.action';//定义flash上传的地址, 是上图的CkeditorUploadAction.java. 
	config.filebrowserFlashBrowseUrl = 'ckeditor/uploader/browse.jsp?type=Flashs';//定义flash的 浏览服务器窗口
	
	
	//**************************************************************
	config.language = 'zh-cn';
	config.filebrowserWindowWidth = '440';
	config.filebrowserWindowHeight = '500';
	
	//........省略了后面的内容..
	
};

三:browse.jsp 代码

<%@page import="java.io.File"%>
<%@ page language="java" contentType="text/html; charset=GB18030"
    pageEncoding="GB18030"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<title>图片浏览</title>
<script type="text/javascript">
//这段函数是重点，不然不能和CKEditor互动了
function funCallback(funcNum,fileUrl){
	var parentWindow = ( window.parent == window ) ? window.opener : window.parent;
	parentWindow.CKEDITOR.tools.callFunction(funcNum, fileUrl);
	window.close();
}
</script>
</head>
<body>
<%
	String path = request.getContextPath() + "/";
	String type = "";
	if(request.getParameter("type") != null)//获取文件分类
		type = request.getParameter("type").toLowerCase() + "/";
	String clientPath = "ckeditor/uploader/upload/" + type;
	File root = new File(request.getSession().getServletContext().getRealPath(clientPath));
	if(!root.exists()){
		root.mkdirs();
	}
	String callback = request.getParameter("CKEditorFuncNum");
	File[] files = root.listFiles();
	if(files.length > 0){
		for(File file:files ) {
			String src = path + clientPath + file.getName();
			out.println("<img width='110px' height='70px' src='" + src + "' alt='" + file.getName() + "' οnclick=\"funCallback("+callback+",'"+ src +"')\">");
		}
	}else{
		out.println("<h3>未检测到资源。</h3>");
	}
 %>
 
</body>
</html>

四: struts.xml定义action , class指向类CkeditorUploadAction.java

CkeditorUploadAction代码:

@Component("ActionCkeditor")
@Scope("prototype")
public class CkeditorUploadAction extends ActionSupport {  
  
    private String uploadContentType;  
      
    private String uploadFileName;  
      
    private String CKEditorFuncNum;  
      
    private String CKEditor;  
      
    private String langCode;  
      
    private File upload;  
      
//....省略set get 方法  
  
    @Override  
    public String execute() throws Exception {  
     String strUrl="";
        String strPath = ServletActionContext.getServletContext().getRealPath("ckeditor/uploader/upload");  
        File path = new File(strPath);  
        if(!path.exists()){  
            path.mkdirs();  
        }  
        String uuid = UUID.randomUUID().toString();
        String rt[] = this.getUploadFileName().split("\\.");
        System.out.println(rt[1]);
        uploadFileName = new String(uuid+"."+rt[1]);//解决上传中文图片、flash或含中文路径时服务器报错的问题。
        String type =null;
        if("jpg".equals(rt[1]) ||"png".equals(rt[1]) ||"gif".equals(rt[1]) ||"jpeg".equals(rt[1]) ||"bmp".equals(rt[1]))
        {
        	type = "images/";
        }
        if("swf".equals(rt[1]))
        {
        	type="flashs/";
        }
        String str = strPath + File.separator +type;
        File file = new File(str);
        if(!file.exists()){  
            file.mkdirs();  
        } 
        System.out.println(this.upload);
        InputStream is = new FileInputStream(this.upload);  
        
        OutputStream os = new FileOutputStream(new File(strPath + File.separator +type+ this.uploadFileName));  
                  
        try {  
  
            int len;  
            byte[] buffer = new byte[1024];  
            while ((len=is.read(buffer)) > 0) {  
                os.write(buffer,0,len);  
            }  
        } catch (Exception e) {  
            e.printStackTrace();  
        } finally {  
            if(is!=null){  
                is.close();  
            }  
            if(os!=null){  
                os.close();  
            }  
        }  
        PrintWriter out = ServletActionContext.getResponse().getWriter();  
        //返回给ckeditor  
        
        strUrl=strPath+ "\\" + this.uploadFileName ; 
        strUrl=  strUrl.replace('\\', '/');//这里如果不替换，会出错！！！
//        System.out.println(strUrl);
        out.write("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction("+this.CKEditorFuncNum+", 'ckeditor/uploader/upload/"
        		+ type
        		+ this.uploadFileName
				+ "', '');</script>");
        return Action.NONE;  
    }  
}

五:这里就做完了. 路径:是