CKEditor文件上传之 JSP实例

最新推荐文章于 2024-10-06 20:16:20 发布

secondsyy

最新推荐文章于 2024-10-06 20:16:20 发布

阅读量137

点赞数

分类专栏： FckEditor/CKEditor 文章标签： java javascript 人工智能 ViewUI

本文链接：https://blog.csdn.net/secondsyy/article/details/84464877

版权

FckEditor/CKEditor 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

转自：http://ckeditor.com/forums/CKEditor-3.x/CKEditor%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%E4%B9%8B-JSP%E5%AE%9E%E4%BE%8B

http://ckeditor.com/demo

CKEditor文件上传之 JSP实例

思路是：

准备一下JSP上传文件的JAR包：commons-fileupload.jar和commons-io.jar

编写一个JSP用于接收上传的文件（这里除上传图片功能外，需调用一个核心JS语句）

编写一个JSP用于浏览文件（这里除上传图片功能外，需调用一个核心JS语句）

修改CKEditor的config.js，将上传文件和浏览文件的JSP配置进去.

接收上传的文件的JSP：

Java代码

<%@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：

Java代码

<%@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>

修改后的CKEditor的config.js：

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

}

调用一下CKEDITOR.tools.callFunction方法。

效果图: