很早以前就想把CKEditor在JSP下的图片上传及浏览服务器图片的方法写下来了,不过因为教学项目中要用到,担心HEM直接套用,自己不去调查(我可是用心良苦啊),不能很好的锻炼,一直没写出来,今天项目开始测试了,他们的功能也都基本可以结束了,我也可以发我的帖了。
写这个的起因是在网上一仁兄的帖子,抱怨说CKEditor不支持JSP了,感叹了许多,说支持ASP、PHP,就是不支持JSP,于是俺也在网上找了找JSP方面的资料,看来确实不支持了,不过人家也是有道理的,毕竟JSP上传的图片,不能简单的用个JSP就随便搞搞就O了。
关于CKEditor在JSP下上传图片的方法,网上有很多,大都是写了一大堆JS代码然后自己注册一个事件,写的太多,我没怎么看懂,不过有一位大侠写的让我看到了简单写法的曙光(不过遗憾的是,时间太长了,不知道大侠的URL了)。
言归正传,对于上传CKEditor已经做好了,我们只要准备个功能,接收CKEditor提交过来的文件就可以了,所以呢实现的思路是:
- 准备一下JSP上传文件的JAR包:commons-fileupload.jar和commons-io.jar
- 编写一个JSP用于接收上传的文件(这里除上传图片功能外,需调用一个核心JS语句)
- 编写一个JSP用于浏览文件(这里除上传图片功能外,需调用一个核心JS语句)
- 修改CKEditor的config.js,将上传文件和浏览文件的JSP配置进去
说明一下,之所以采用JSP没有使用Servlet,那是因为JSP简单啊,这样可以降低CKEditor对项目的侵入性啊。下面看代码啦:
用于接收上传的文件的JSP:
<%@page import="java.io.File"%>
<%@page import="java.util.UUID"%>
<%@page import="org.apache.commons.fileupload.FileItem"%>
<%@page import="java.util.List"%>
<%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
<%@page import="org.apache.commons.fileupload.FileItemFactory"%>
<%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>
<%@ 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>JSP上传文件</title>
</head>
<body>
<%
String path = request.getContextPath() + "/";
if(ServletFileUpload.isMultipartContent(request)){
String type = "";
if(request.getParameter("type") != null)//获取文件分类
type = request.getParameter("type").toLowerCase() + "/";
String callback = request.getParameter("CKEditorFuncNum");//获取回调JS的函数Num
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload servletFileUpload = new ServletFileUpload(factory);
servletFileUpload.setHeaderEncoding("UTF-8");//解决文件名乱码的问题
List<FileItem> fileItemsList = servletFileUpload.parseRequest(request);
for (FileItem item : fileItemsList) {
if (!item.isFormField()) {
String fileName = item.getName();
fileName = "file" + System.currentTimeMillis() + fileName.substring(fileName.lastIndexOf("."));
//定义文件路径,根据你的文件夹结构,可能需要做修改
String clientPath = "ckeditor/uploader/upload/" + type + fileName;
//保存文件到服务器上
File file = new File(request.getSession().getServletContext().getRealPath(clientPath));
if (!file.getParentFile().exists()) {
file.getParentFile().mkdirs();
}
item.write(file);
//打印一段JS,调用parent页面的CKEditor的函数,传递函数编号和上传后文件的路径;这句很重要,成败在此一句
out.println("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction("+callback+",'"+path+clientPath+"')</script>");
break;
}
}
}
%>
</body>
</html>
用于浏览文件的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>
修改后的CKEditor的config.js:
CKEDITOR.editorConfig = function( config )
{
config.language = 'zh-cn';
config.filebrowserBrowseUrl = 'ckeditor/uploader/browse.jsp';
config.filebrowserImageBrowseUrl = 'ckeditor/uploader/browse.jsp?type=Images';
config.filebrowserFlashBrowseUrl = 'ckeditor/uploader/browse.jsp?type=Flashs';
config.filebrowserUploadUrl = 'ckeditor/uploader/upload.jsp';
config.filebrowserImageUploadUrl = 'ckeditor/uploader/upload.jsp?type=Images';
config.filebrowserFlashUploadUrl = 'ckeditor/uploader/upload.jsp?type=Flashs';
config.filebrowserWindowWidth = '640';
config.filebrowserWindowHeight = '480';
}
OK,修改完毕。简单吧,其实上传和浏览文件很简单(上面只是一个演示,代码仅供参考),要点是要调用一下CKEDITOR.tools.callFunction方法。
附件打包了一个可运行的Eclipse工程,供需要的朋友参考。
---------------------------------------------------------------------------------------
图片预览:
文件夹结构截图
上传效果截图:
- 大小: 17 KB
- 大小: 31 KB
- 大小: 19.2 KB
- 大小: 44.9 KB
- 大小: 61.2 KB
分享到:
相关推荐
CKEditor在jsp中实现文件上传,java应用
CKEditor 在jsp中实现文件上传的完整例
最后配置视频上传路径的URL路径,也就是POST上传文件的地址:config.filebrowserFlvPlayerUploadUrl = '/ckeditor/upload_json.ashx?dir=media',注意一定要是filebrowserFlvPlayerUploadUrl,这里要对应flvPlayer...
JSP使用ckeditor和ckfinder实现富文本及文件上传,以及文本判空处理。
Ckeditor + ckfinder整合for JAVA(支持文件上传)
利用jsp实现ckeditor_3_6_2 上传图片功能,里面包含完整的工程,不过需要自己引入commons-fileupload-1.2.1.jar,commons-io-1.4.jar文件上传包,网上一大把。只要能正确引入,该工程就能完成
本插件支持所有动态网站技术,DEMO所用技术为jsp,服务器端接受上传文件的动态页面为一Servelt:WordImageUploader.java,此文件已经在DEMO中给出,其它动态网站技术请参照此文件自行实现。 ----------------------...
本插件支持所有动态网站技术,DEMO所用技术为jsp,服务器端接受上传文件的动态页面为一Servelt:WordImageUploader.java,此文件已经在DEMO中给出,其它动态网站技术请参照此文件自行实现。 ---------------------...
Eclipse下配置CKEditor3.5.3+CKFinder2.0.2 FCKeditor 使用详解 Ckeditor与ckfinder整合forJAVA(支持文件上传) jsp ckeditor使用 很全面哦!值得收藏
Ckeditor是一款强大的在线编辑器,缺点是对JSP上传图片功能不支持。本文对上传文件部分做一定修改,已经完善了上传功能。大家可以放心使用!
java+servlet+javabean版本的editor3.2,包含详细的配置说明,完善其不支持文件上传的BUG
图片上传:点击“图片”按钮,然后选择”上传“,选择图片文件之后,再点击“上传到服务器”,即可在“图像”标签栏显示预览图像,可以在此调整尺寸大小等参数,点击“确定”即可插入进去,提交之后会显示图片,不用...
JSP中CKEditor+CKFinder的整合 笔者找了很多资料 最后整理出来一个最简洁的方法来和大家分享 已经经过测试 可以运行 成功实现文件上传和浏览
JSP使用ckeditor和ckfinder实现富文本及文件上传,以及文本判空处理。
整合了最新的ckeditor和ckfinder,实现文件的上传,这个是个例子,你可以在此基础上进行拓展,仅仅是jsp的。
3. 支持本地文件图片上传。 4. 支持PhotoShop等应用程序的图片粘贴。 5. 支持自定义图片上传格式(JPG,GIF,PNG,BMP)。 6. 支持自定义图片缩略图尺寸。 7. 支持自定义图片质量(1~100)。 8. 免费提供JavaScript ...
请不要解压WordPaster.cab,将完整的WordPaster.cab文件上传到服务器中,IE浏览器会自动安装CAB。CAB文件相当于是一个自动安装控件的脚本。 2.修改cab文件下载地址,修改classid号 打开js\ImagePaster.js。下面的...
Java访问权限控制,为Java操作文件、写入文件分配合适的权限,定义写到文件的信息、定义文件,输出到c:/hello.txt、写信息到文件、关闭输出流。 Java绘制图片火焰效果 1个目标文件 摘要:Java源码,图形操作,火焰...
Java数组倒置 简单 Java图片加水印,支持旋转和透明度设置 摘要:Java源码,文件操作,图片水印 util实现Java图片水印添加功能,有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印...