• 让ＣＫＥＤＩＴＯＲ支持ＪＳＰ上传

    很早以前就想把CKEditor在JSP下的图片上传及浏览服务器图片的方法写下来了，不过因为教学项目中要用到，担心HEM直接套用，自己不去调查（我可是用心良苦啊），不能很好的锻炼，一直没写出来，今天项目开始测试了，他们的功能也都基本可以结束了，我也可以发我的帖了。

    写这个的起因是在网上一仁兄的帖子，抱怨说CKEditor不支持JSP了，感叹了许多，说支持ASP、PHP，就是不支持JSP，于是俺也在网上找了找JSP方面的资料，看来确实不支持了，不过人家也是有道理的，毕竟JSP上传的图片，不能简单的用个JSP就随便搞搞就O了。

    关于CKEditor在JSP下上传图片的方法，网上有很多，大都是写了一大堆JS代码然后自己注册一个事件，写的太多，我没怎么看懂，不过有一位大侠写的让我看到了简单写法的曙光（不过遗憾的是，时间太长了，不知道大侠的URL了）。

    言归正传，对于上传CKEditor已经做好了，我们只要准备个功能，接收CKEditor提交过来的文件就可以了，所以呢实现的思路是：

    1. 准备一下JSP上传文件的JAR包：commons-fileupload.jar和commons-io.jar
    2. 编写一个JSP用于接收上传的文件（这里除上传图片功能外，需调用一个核心JS语句）
    3. 编写一个JSP用于浏览文件（这里除上传图片功能外，需调用一个核心JS语句）
    4. 修改CKEditor的config.js，将上传文件和浏览文件的JSP配置进去

    说明一下，之所以采用JSP没有使用Servlet，那是因为JSP简单啊，这样可以降低CKEditor对项目的侵入性啊。下面看代码啦：

    用于接收上传的文件的JSP：

    Java代码 复制代码 收藏代码
    1. <%@page import="java.io.File"%>   
    2. <%@page import="java.util.UUID"%>   
    3. <%@page import="org.apache.commons.fileupload.FileItem"%>   
    4. <%@page import="java.util.List"%>   
    5. <%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>   
    6. <%@page import="org.apache.commons.fileupload.FileItemFactory"%>   
    7. <%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>   
    8. <%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%>   
    9. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">   
    10. <html>   
    11. <head>   
    12. <meta http-equiv="Content-Type" content="text/html; charset=GB18030">   
    13. <meta http-equiv="pragma" content="no-cache">   
    14. <meta http-equiv="cache-control" content="no-cache">   
    15. <meta http-equiv="expires" content="0">   
    16. <title>JSP上传文件</title>   
    17. </head>   
    18. <body>   
    19. <%   
    20. String path = request.getContextPath() + "/";   
    21. if(ServletFileUpload.isMultipartContent(request)){   
    22.     String type = "";   
    23.     if(request.getParameter("type") != null)//获取文件分类   
    24.         type = request.getParameter("type").toLowerCase() + "/";   
    25.     String callback = request.getParameter("CKEditorFuncNum");//获取回调JS的函数Num   
    26.     FileItemFactory factory = new DiskFileItemFactory();   
    27.     ServletFileUpload servletFileUpload = new ServletFileUpload(factory);   
    28.     servletFileUpload.setHeaderEncoding("UTF-8");//解决文件名乱码的问题   
    29.     List<FileItem> fileItemsList = servletFileUpload.parseRequest(request);   
    30.     for (FileItem item : fileItemsList) {   
    31.         if (!item.isFormField()) {   
    32.             String fileName = item.getName();   
    33.             fileName = "file" + System.currentTimeMillis() + fileName.substring(fileName.lastIndexOf("."));   
    34.             //定义文件路径，根据你的文件夹结构，可能需要做修改   
    35.             String clientPath = "ckeditor/uploader/upload/" + type + fileName;   
    36.   
    37.             //保存文件到服务器上   
    38.             File file = new File(request.getSession().getServletContext().getRealPath(clientPath));   
    39.             if (!file.getParentFile().exists()) {   
    40.                 file.getParentFile().mkdirs();   
    41.             }   
    42.             item.write(file);   
    43.   
    44.             //打印一段JS，调用parent页面的CKEditor的函数，传递函数编号和上传后文件的路径；这句很重要，成败在此一句   
    45.             out.println("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction("+callback+",'"+path+clientPath+"')</script>");   
    46.             break;   
    47.         }   
    48.     }   
    49. }   
    50.  %>   
    51. </body>   
    52. </html>  

    用于浏览文件的JSP：

    Java代码 复制代码 收藏代码
    1. <%@page import="java.io.File"%>   
    2. <%@ page language="java" contentType="text/html; charset=GB18030"  
    3.     pageEncoding="GB18030"%>   
    4. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">   
    5. <html>   
    6. <head>   
    7. <meta http-equiv="Content-Type" content="text/html; charset=GB18030">   
    8. <meta http-equiv="pragma" content="no-cache">   
    9. <meta http-equiv="cache-control" content="no-cache">   
    10. <meta http-equiv="expires" content="0">   
    11. <title>图片浏览</title>   
    12. <script type="text/javascript">   
    13. //这段函数是重点，不然不能和CKEditor互动了   
    14. function funCallback(funcNum,fileUrl){   
    15.     var parentWindow = ( window.parent == window ) ? window.opener : window.parent;   
    16.     parentWindow.CKEDITOR.tools.callFunction(funcNum, fileUrl);   
    17.     window.close();   
    18. }   
    19. </script>   
    20. </head>   
    21. <body>   
    22. <%   
    23.     String path = request.getContextPath() + "/";   
    24.     String type = "";   
    25.     if(request.getParameter("type") != null)//获取文件分类   
    26.         type = request.getParameter("type").toLowerCase() + "/";   
    27.     String clientPath = "ckeditor/uploader/upload/" + type;   
    28.     File root = new File(request.getSession().getServletContext().getRealPath(clientPath));   
    29.     if(!root.exists()){   
    30.         root.mkdirs();   
    31.     }   
    32.     String callback = request.getParameter("CKEditorFuncNum");   
    33.     File[] files = root.listFiles();   
    34.     if(files.length > 0){   
    35.         for(File file:files ) {   
    36.             String src = path + clientPath + file.getName();   
    37.             out.println("<img width='110px' height='70px' src='" + src + "' alt='" + file.getName() + "' onclick=\"funCallback("+callback+",'"+ src +"')\">");   
    38.         }   
    39.     }else{   
    40.         out.println("<h3>未检测到资源。</h3>");   
    41.     }   
    42.  %>   
    43. </body>   
    44. </html>  

    修改后的CKEditor的config.js： 

    Js代码 复制代码 收藏代码
    1. CKEDITOR.editorConfig = function( config )   
    2. {   
    3.     config.language = 'zh-cn';   
    4.     config.filebrowserBrowseUrl = 'ckeditor/uploader/browse.jsp';   
    5.     config.filebrowserImageBrowseUrl = 'ckeditor/uploader/browse.jsp?type=Images';   
    6.     config.filebrowserFlashBrowseUrl = 'ckeditor/uploader/browse.jsp?type=Flashs';   
    7.     config.filebrowserUploadUrl = 'ckeditor/uploader/upload.jsp';   
    8.     config.filebrowserImageUploadUrl = 'ckeditor/uploader/upload.jsp?type=Images';   
    9.     config.filebrowserFlashUploadUrl = 'ckeditor/uploader/upload.jsp?type=Flashs';   
    10.     config.filebrowserWindowWidth = '640';   
    11.     config.filebrowserWindowHeight = '480';   
    12. }  

    OK，修改完毕。简单吧，其实上传和浏览文件很简单（上面只是一个演示，代码仅供参考），要点是要调用一下CKEDITOR.tools.callFunction方法。

    附件打包了一个可运行的Eclipse工程，供需要的朋友参考。

    ---------------------------------------------------------------------------------------

    图片预览：

    文件夹结构截图


    上传效果截图：



     
     

    • 大小: 17 KB
  • 相关阅读:
    众皓网络（T 面试）
    骑芯供应链（T 面试）
    骑芯供应链（W 笔试）
    面试问题_一拉到底
    Java后端学习路线_备战
    docker 容器
    技术展望
    索引 命令
    索引 概念原理
    面试技能更新
  • 原文地址：https://www.cnblogs.com/hannover/p/2121536.html
Copyright © 2020-2023  润新知