ckeditor的浏览服务器文件功能

来源：互联网发布：51单片机端口有感叹号编辑：程序博客网时间：2024/05/16 12:30

http://secyaher.blog.163.com/blog/static/389557720120195313340/

其它参考JS 抽取FCKEditor的浏览图片功能

接上篇文章，本章节讲述使用java语言的ckeditor服务器文件浏览功能。

// 虽然两篇文章的代码都带有文件类型参数，但是此处不进行判断非法格式，仅以图片类型为主介绍控件功能的开发过程。

上篇文章中，在CKEDITOR的图片选择页面，我们增加了一个浏览按钮

我们希望点击浏览服务器可以去服务器直接选择已经通过其他方式上传的图片，依旧很痛苦的是，我们没有那么多的银子去购买图片服务器，所以在应用中开辟了特定的区域来存放图片，并且采用分文件夹的方式。所以，浏览服务器，就涉及到多级目录的问题，我们希望如果当前的目录下存在子目录，那么可以直接进入子目录挑选图片，并且可以自由的前后操作。

先看看效果：

这样用户可以直接在界面上操作图片，进行富文本的编辑。

看看代码：

[java] view plaincopyprint?

package com.normandy.position.web;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;
import java.net.URLEncoder;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.lang.StringUtils;
import org.apache.log4j.Logger;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import com.normandy.position.common.NorStringUtils;
/**
* 浏览服务器的图片
* @author: quzishen
* @class_type: FileBrowerController
* @version: v1.0
* @create_time：2010-8-24 下午03:54:04
* @project_name:NormandyPosition
* @description:
* <p>
*
* </p>
*/
@Controller
@RequestMapping("/browerServer.do")
public class FileBrowerController {
protected final Logger logger = Logger
.getLogger(FileBrowerController.class);
/** ~~~ 上传文件的保存路径 */
private static final String FILE_UPLOAD_DIR = "upload";
/** ~~~ 上传文件的保存的下一级路径，标示存储类型 */
private static final String FILE_UPLOAD_SUB_IMG_DIR = "img";
/** ~~~ 为了能让CKEDITOR加载到上传的图片，此处将位置限制在了freemarker下*/
private static final String FOR_FREEMARKER_LOAD_DIR = "freemarker";
@RequestMapping(method = RequestMethod.GET)
public void processBrower(ModelMap modelMap, HttpServletRequest request,
HttpServletResponse response) {
processBrowerPost(modelMap, request, response);
return;
}
@SuppressWarnings("deprecation")
@RequestMapping(method = RequestMethod.POST)
public void processBrowerPost(ModelMap modelMap,
HttpServletRequest request, HttpServletResponse response) {
String typeStr = request.getParameter("type");
String floderName = request.getParameter("fo");
if (logger.isDebugEnabled()) {
logger.debug("浏览文件，文件格式:" + typeStr);
}
// 定位到目标文件夹：上传目录
String realPath = "";
if(StringUtils.isNotBlank(floderName)){
floderName = URLDecoder.decode(floderName);
// 如果请求中存在文件夹名称，则定位到文件夹中
realPath = request.getSession().getServletContext().getRealPath(floderName);
if(logger.isInfoEnabled()){
logger.info("sub floder:"+realPath);
}
}else if(StringUtils.equalsIgnoreCase(typeStr, "Image")){
// 如果请求中不存在文件夹名称，则使用默认的文件夹
realPath = request.getSession().getServletContext().getRealPath(FOR_FREEMARKER_LOAD_DIR+ File.separator+FILE_UPLOAD_DIR+ File.separator+FILE_UPLOAD_SUB_IMG_DIR);
if(logger.isInfoEnabled()){
logger.info("default floder:"+realPath);
}
}
File folder = new File(realPath);
if(!folder.exists()){
return;
}
// 存储子目录 ,路径需要从/freemarker开始
List<String> subFolderSet = new ArrayList<String>();
// 存储文件夹
List<String> subFileerSet = new ArrayList<String>();
File[] subFiles = folder.listFiles();
if(null != subFiles && 0 < subFiles.length){
for(int i=0;i < subFiles.length; i++){
File _file = subFiles[i];
if(_file.isDirectory()){
subFolderSet.add(getDefaultFolderFromFreemarker(_file));
} else {
subFileerSet.add(NorStringUtils.getFileName(_file.getName()));
}
}
}
String callback = request.getParameter("CKEditorFuncNum");
PrintWriter out;
response.setContentType("text/html");
response.setCharacterEncoding("GB2312");
try {
out = response.getWriter();
out.println("<mce:script type='text/javascript'><!--
");
// 定义点击选择js
out.println("function choose(obj){");
out.println("window.opener.CKEDITOR.tools.callFunction(" + callback
+ ",obj)");
out.println("window.close();");
out.println("}");
// 定义文件夹点击响应js
out.println("function view(obj){window.location.href='browerServer.do?type=image&CKEditorFuncNum="+callback+"&fo='+obj;}");
out.println("
// --></mce:script>");
// 这里显示一个返回顶级目录，也就是返回freemarker目录
out.print("<div style='width:100%;float:left;word-break:break-all;' onclick =view('" + URLEncoder.encode("/freemarker/upload") + "')>");
out.print("<span>[根目录]<span/>");
out.print("</div>");
// 如果是子文件夹，显示上级目录链接
if(StringUtils.isNotBlank(floderName) && !checkIsRoot(folder)){
String parent = getDefaultFolderFromFreemarker(folder.getParentFile());
out.print("<div style='width:100%;float:left;word-break:break-all;' onclick =view('" + URLEncoder.encode(parent) + "')>");
out.print("<span>[上级目录]"+parent+"<span/>");
out.print("</div>");
if(logger.isDebugEnabled()){
logger.debug("发现上级目录:"+ parent);
}
}
// 如果是文件夹，则显示文件夹并且可以再次触发下级和上级目录
if(0 < subFolderSet.size()){
Iterator<String> subFolderSetIndex = subFolderSet.iterator();
while(subFolderSetIndex.hasNext()){
String ftemp = subFolderSetIndex.next();
// 这里url传递的时候，文件分隔符会有问题，需要转义
out.print("<div style='width:100%;float:left;word-break:break-all;' onclick =view('" + URLEncoder.encode(ftemp) + "')>");
out.print("<span>[下级目录]"+ftemp+"</span>");
out.print("</div>");
if(logger.isDebugEnabled()){
logger.debug("添加子目录："+ftemp);
}
}
}
// 如果是文件，则点击就选择文件到控件中
if(0 < subFileerSet.size()){
Iterator<String> subFileerSetIndex = subFileerSet.iterator();
while(subFileerSetIndex.hasNext()){
String ftemp = subFileerSetIndex.next();
String f = getDefaultFolderFromFreemarker(folder);
String fileUrl = f + File.separator + ftemp;
fileUrl = StringUtils.replace(fileUrl, "//", "/");
out.print("<div style='width:150px;height:150px;float:left;word-break:break-all;padding:5px;background:#666699;margin:5px;'>");
out.print("<a href="javascript:void(0)" mce_href="javascript:void(0)" onclick=choose('"+fileUrl+"')><img style='border:none;width:145px;height:145px;' src=""+fileUrl+"" mce_src=""+fileUrl+"" title='"+fileUrl+"'/></a>");
out.print("</div>");
if(logger.isDebugEnabled()){
logger.debug("添加文件："+fileUrl);
}
}
}
out.flush();
out.close();
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* 从freemarker这一级开始获取文件夹路径
* @return
*/
private static String getDefaultFolderFromFreemarker(File folder){
String path = folder.getPath();
path = path.substring(path.indexOf(FOR_FREEMARKER_LOAD_DIR));
return path;
}
/**
* 判断是否是根目录
* @param floderName
* @return
*/
private static boolean checkIsRoot(File folder){
String name = NorStringUtils.getFileName(folder.getName());
return StringUtils.equalsIgnoreCase(name, FILE_UPLOAD_DIR);
}
}

package com.normandy.position.web; import java.io.File; import java.io.IOException; import java.io.PrintWriter; import java.net.URLDecoder; import java.net.URLEncoder; import java.util.ArrayList; import java.util.Iterator; import java.util.List; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.commons.lang.StringUtils; import org.apache.log4j.Logger; import org.springframework.stereotype.Controller; import org.springframework.ui.ModelMap; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import com.normandy.position.common.NorStringUtils; /** * 浏览服务器的图片 * @author: quzishen * @class_type: FileBrowerController * @version: v1.0 * @create_time：2010-8-24 下午03:54:04 * @project_name:NormandyPosition * @description: * <p> * * </p> */ @Controller @RequestMapping("/browerServer.do") public class FileBrowerController { protected final Logger logger = Logger .getLogger(FileBrowerController.class); /** ~~~ 上传文件的保存路径 */ private static final String FILE_UPLOAD_DIR = "upload"; /** ~~~ 上传文件的保存的下一级路径，标示存储类型 */ private static final String FILE_UPLOAD_SUB_IMG_DIR = "img"; /** ~~~ 为了能让CKEDITOR加载到上传的图片，此处将位置限制在了freemarker下*/ private static final String FOR_FREEMARKER_LOAD_DIR = "freemarker"; @RequestMapping(method = RequestMethod.GET) public void processBrower(ModelMap modelMap, HttpServletRequest request, HttpServletResponse response) { processBrowerPost(modelMap, request, response); return; } @SuppressWarnings("deprecation") @RequestMapping(method = RequestMethod.POST) public void processBrowerPost(ModelMap modelMap, HttpServletRequest request, HttpServletResponse response) { String typeStr = request.getParameter("type"); String floderName = request.getParameter("fo"); if (logger.isDebugEnabled()) { logger.debug("浏览文件，文件格式:" + typeStr); } // 定位到目标文件夹：上传目录 String realPath = ""; if(StringUtils.isNotBlank(floderName)){ floderName = URLDecoder.decode(floderName); // 如果请求中存在文件夹名称，则定位到文件夹中 realPath = request.getSession().getServletContext().getRealPath(floderName); if(logger.isInfoEnabled()){ logger.info("sub floder:"+realPath); } }else if(StringUtils.equalsIgnoreCase(typeStr, "Image")){ // 如果请求中不存在文件夹名称，则使用默认的文件夹 realPath = request.getSession().getServletContext().getRealPath(FOR_FREEMARKER_LOAD_DIR+ File.separator+FILE_UPLOAD_DIR+ File.separator+FILE_UPLOAD_SUB_IMG_DIR); if(logger.isInfoEnabled()){ logger.info("default floder:"+realPath); } } File folder = new File(realPath); if(!folder.exists()){ return; } // 存储子目录 ,路径需要从/freemarker开始 List<String> subFolderSet = new ArrayList<String>(); // 存储文件夹 List<String> subFileerSet = new ArrayList<String>(); File[] subFiles = folder.listFiles(); if(null != subFiles && 0 < subFiles.length){ for(int i=0;i < subFiles.length; i++){ File _file = subFiles[i]; if(_file.isDirectory()){ subFolderSet.add(getDefaultFolderFromFreemarker(_file)); } else { subFileerSet.add(NorStringUtils.getFileName(_file.getName())); } } } String callback = request.getParameter("CKEditorFuncNum"); PrintWriter out; response.setContentType("text/html"); response.setCharacterEncoding("GB2312"); try { out = response.getWriter(); out.println("<mce:script type='text/javascript'></mce:script>"); // 这里显示一个返回顶级目录，也就是返回freemarker目录 out.print("<div style='width:100%;float:left;word-break:break-all;' onclick =view('" + URLEncoder.encode("/freemarker/upload") + "')>"); out.print("<span>[根目录]<span/>"); out.print("</div>"); // 如果是子文件夹，显示上级目录链接 if(StringUtils.isNotBlank(floderName) && !checkIsRoot(folder)){ String parent = getDefaultFolderFromFreemarker(folder.getParentFile()); out.print("<div style='width:100%;float:left;word-break:break-all;' onclick =view('" + URLEncoder.encode(parent) + "')>"); out.print("<span>[上级目录]"+parent+"<span/>"); out.print("</div>"); if(logger.isDebugEnabled()){ logger.debug("发现上级目录:"+ parent); } } // 如果是文件夹，则显示文件夹并且可以再次触发下级和上级目录 if(0 < subFolderSet.size()){ Iterator<String> subFolderSetIndex = subFolderSet.iterator(); while(subFolderSetIndex.hasNext()){ String ftemp = subFolderSetIndex.next(); // 这里url传递的时候，文件分隔符会有问题，需要转义 out.print("<div style='width:100%;float:left;word-break:break-all;' onclick =view('" + URLEncoder.encode(ftemp) + "')>"); out.print("<span>[下级目录]"+ftemp+"</span>"); out.print("</div>"); if(logger.isDebugEnabled()){ logger.debug("添加子目录："+ftemp); } } } // 如果是文件，则点击就选择文件到控件中 if(0 < subFileerSet.size()){ Iterator<String> subFileerSetIndex = subFileerSet.iterator(); while(subFileerSetIndex.hasNext()){ String ftemp = subFileerSetIndex.next(); String f = getDefaultFolderFromFreemarker(folder); String fileUrl = f + File.separator + ftemp; fileUrl = StringUtils.replace(fileUrl, "//", "/"); out.print("<div style='width:150px;height:150px;float:left;word-break:break-all;padding:5px;background:#666699;margin:5px;'>"); out.print("<a href="javascript:void(0)" mce_href="javascript:void(0)" onclick=choose('"+fileUrl+"')><img style='border:none;width:145px;height:145px;' src=""+fileUrl+"" mce_src=""+fileUrl+"" title='"+fileUrl+"'/></a>"); out.print("</div>"); if(logger.isDebugEnabled()){ logger.debug("添加文件："+fileUrl); } } } out.flush(); out.close(); } catch (IOException e) { e.printStackTrace(); } } /** * 从freemarker这一级开始获取文件夹路径 * @return */ private static String getDefaultFolderFromFreemarker(File folder){ String path = folder.getPath(); path = path.substring(path.indexOf(FOR_FREEMARKER_LOAD_DIR)); return path; } /** * 判断是否是根目录 * @param floderName * @return */ private static boolean checkIsRoot(File folder){ String name = NorStringUtils.getFileName(folder.getName()); return StringUtils.equalsIgnoreCase(name, FILE_UPLOAD_DIR); } }

这里注意，如果你没有成功，看第一篇最后部分的部署配置介绍，很简单的事儿