您的位置：首页 > 其它

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

2013-01-25 19:29 447 查看

例子下载地址!

在发表文章的时候,经常会使用到图片, 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() + "' onclick=\"funCallback("+callback+",'"+ src +"')\">");
}
}else{
out.println("<h3>未检测到资源。</h3>");
}
%>

</body>
</html>

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

<action name="actionckeditor" class="ActionCkeditor" >

</action>

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;
}
}

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航