ckeditor java 上传_CKEditor文件上传之 JSP实例

思路是：

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

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

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

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

接收上传的文件的JSP：

Java代码

JSP上传文件

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 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("");

break;

}

}

}

%>

用于浏览文件的JSP：

Java代码

pageEncoding="GB18030"%>

图片浏览

//这段函数是重点，不然不能和CKEditor互动了

function funCallback(funcNum,fileUrl){

var parentWindow = ( window.parent == window ) ? window.opener : window.parent;

parentWindow.CKEDITOR.tools.callFunction(funcNum, fileUrl);

window.close();

}

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("");

}

}else{

out.println("

未检测到资源。

");

}

%>

修改后的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方法。

效果图: