zoukankan      html  css  js  c++  java
  • CKeditor上传图片 实现所见即所得界面

    迟了好多天的分享,CKeditor这个编辑器虽然不错,但也真苟啊,搞图片上传这个功能,快给我搞佛系了,话不多说,上代码

    1、首先去官网下载一个full的版本,我用的是CKeditor 4.13,解压之后放在webcontent下边

    2、在你要用的界面添加下这个

    引入ckeditor编辑器

     3.还有这个,这是加载文本编辑器的

    <textarea class="form-control" id="editor" name="content" style="color:#8a8a8a; 100%; height: 482px; display: block;"></textarea>

         <script type="text/javascript">
    
                CKEDITOR.replace('editor',{filebrowserUploadUrl : '${path}/ckeditor/uploader?Type=File',
     
                filebrowserImageUploadUrl : '${path}/ckeditor/uploader?Type=Image',
    
                filebrowserFlashUploadUrl : '${path}/ckeditor/uploader?Type=Flash'
     
                });
            </script>

    4.

     这个是你自己的路径,

     5.这个是那个上传链接里边的ckeditor文件夹(并不是下载的文本编辑器的文件),处理上传的图片文件, 

    CKEditorUploadServlet.java

    package ckeditor;
    
    
    import java.io.*;  
    import java.text.SimpleDateFormat;  
    import java.util.*;  
    import javax.servlet.ServletException;  
    import javax.servlet.http.*;  
    import org.apache.commons.fileupload.FileItem;  
    import org.apache.commons.fileupload.FileItemFactory;  
    import org.apache.commons.fileupload.disk.DiskFileItemFactory;  
    import org.apache.commons.fileupload.servlet.ServletFileUpload;  
    public class CKEditorUploadServlet extends HttpServlet {  
        private static String baseDir;// CKEditor根目录
        private static boolean debug = false;// 是否debug模式  
        private static boolean enabled = false;// 是否开启CKEditor上传  
        private static Hashtable allowedExtensions;//允许的上传文件扩展名  
        private static Hashtable deniedExtensions;// 阻止的上传文件扩展名  
        private static SimpleDateFormat dirFormatter;//目录命名格式:yyyyMM  
        private static SimpleDateFormat fileFormatter;//文件命名格式:yyyyMMddHHmmssSSS  
        /** 
         * Servlet初始化方法 
         */  
        public void init() throws ServletException {  
            // 从web.xml中读取debug模式  
            debug = (new Boolean(getInitParameter("debug"))).booleanValue();  
            if (debug)  
                System.out.println("
    ---- SimpleUploaderServlet initialization started ----");  
         // 格式化目录和文件命名方式 
            dirFormatter = new SimpleDateFormat("yyyyMM");  
            fileFormatter = new SimpleDateFormat("yyyyMMddHHmmssSSS");  
            // 从web.xml中获取根目录名称  
            baseDir = getInitParameter("baseDir");  
            // 从web.xml中获取是否可以进行文件上传  
            enabled = (new Boolean(getInitParameter("enabled"))).booleanValue();  
            if (baseDir == null)  
                baseDir = "/UserFiles/";  
            String realBaseDir = getServletContext().getRealPath(baseDir);  
            File baseFile = new File(realBaseDir);  
            if (!baseFile.exists()) {  
                baseFile.mkdirs();  
            }  
            // 实例化允许的扩展名和阻止的扩展名  
            allowedExtensions = new Hashtable(3);  
            deniedExtensions = new Hashtable(3);  
            // 从web.xml中读取配置信息  
            allowedExtensions.put("File",  
            stringToArrayList(getInitParameter("AllowedExtensionsFile")));  
            deniedExtensions.put("File",  
            stringToArrayList(getInitParameter("DeniedExtensionsFile")));  
            allowedExtensions.put("Image",  
        stringToArrayList(getInitParameter("AllowedExtensionsImage")));  
            deniedExtensions.put("Image",           stringToArrayList(getInitParameter("DeniedExtensionsImage")));  
            allowedExtensions.put("Flash",          stringToArrayList(getInitParameter("AllowedExtensionsFlash")));  
            deniedExtensions.put("Flash",           stringToArrayList(getInitParameter("DeniedExtensionsFlash")));  
            if (debug)  
                System.out.println("---- SimpleUploaderServlet initialization completed ----
    ");  
        }  
        public void doGet(HttpServletRequest request, HttpServletResponse response)  
                throws ServletException, IOException {  
            doPost(request, response);  
        }  
        public void doPost(HttpServletRequest request, HttpServletResponse response)  
                throws ServletException, IOException {  
            if (debug)  
                System.out.println("--- BEGIN DOPOST ---");  
            //response.setContentType("text/html; charset=UTF-8");
            response.setContentType("text/json; charset=utf-8");
            response.setHeader("Cache-Control", "no-cache");  
            PrintWriter out = response.getWriter();  
            // 从请求参数中获取上传文件的类型:File/Image/Flash  
            String typeStr = request.getParameter("Type");  
            if (typeStr == null) {  
                typeStr = "File";  
            }  
            if (debug)  
                System.out.println(typeStr);  
            // 实例化dNow对象,获取当前时间  
            Date dNow = new Date();  
            // 设定上传文件路径  
            String currentPath = baseDir + typeStr + "/"  
                    + dirFormatter.format(dNow);  
            // 获得web应用的上传路径  
            String currentDirPath = getServletContext().getRealPath(currentPath);  
            // 判断文件夹是否存在,不存在则创建
            File dirTest = new File(currentDirPath);  
            if (!dirTest.exists()) {  
                dirTest.mkdirs();  
            }  
            // 将路径前加上web应用名  
            currentPath = request.getContextPath() + currentPath;  
            if (debug)  
                System.out.println(currentDirPath);  
            // 文件名和文件真实路径  
            String newName = "";  
            String fileUrl = "";  
            if (enabled) {  
                // 使用Apache Common组件中的fileupload进行文件上传  
                FileItemFactory factory = new DiskFileItemFactory();  
                ServletFileUpload upload = new ServletFileUpload(factory);  
                try {  
                    List items = upload.parseRequest(request);  
                    Map fields = new HashMap();  
                    Iterator iter = items.iterator();  
                    while (iter.hasNext()) {  
                        FileItem item = (FileItem) iter.next();  
                        if (item.isFormField())  
                            fields.put(item.getFieldName(), item.getString());  
                        else  
                            fields.put(item.getFieldName(), item);  
                    }  
                    // CEKditor中file域的name值是upload 
                    FileItem uplFile = (FileItem) fields.get("upload");  
                 // 获取文件名并做处理  
                    String fileNameLong = uplFile.getName();  
                    fileNameLong = fileNameLong.replace('\', '/');  
                    String[] pathParts = fileNameLong.split("/");  
                    String fileName = pathParts[pathParts.length - 1];  
                    // 获取文件扩展名  
                    String ext = getExtension(fileName);  
                    // 设置上传文件名  
                    fileName = fileFormatter.format(dNow) + "." + ext;  
                    // 获取文件名(无扩展名)   
                    String nameWithoutExt = getNameWithoutExtension(fileName);  
                    File pathToSave = new File(currentDirPath, fileName);  
                    fileUrl = currentPath + "/" + fileName;  
                    if (extIsAllowed(typeStr, ext)) {  
                        int counter = 1;  
                        while (pathToSave.exists()) {  
                            newName = nameWithoutExt + "_" + counter + "." + ext;  
                            fileUrl = currentPath + "/" + newName;  
                            pathToSave = new File(currentDirPath, newName);  
                            counter++;  
                        }  
                        uplFile.write(pathToSave);  
                    } else {  
                        if (debug)  
                            System.out.println("无效的文件类型 " + ext);  
                    }  
                } catch (Exception ex) {  
                    if (debug)  
                        ex.printStackTrace();  
                }  
            } else {  
                if (debug)  
                    System.out.println("未开启CKEditor上传功能");  
            }  
            // CKEditorFuncNum是回调时显示的位置,这个参数必须有  
            String callback = request.getParameter("CKEditorFuncNum");  
            System.out.println(request.getParameter("CKEditorFuncNum"));
            System.out.println(request.getParameter("CKEditor"));
            System.out.println(request.getParameter("langCode"));
            
            String json="{"uploaded" : 1, "fileName" : "fileNameStr", "url":""+fileUrl+"" , "error" : { "message":"successful" } }";
            out.println(json);
            out.flush();  
             out.close();
    
            
            
           // out.println("<script type="text/javascript">");  
          //  out.println("window.parent.CKEDITOR.tools.callFunction(" + "'1'"  
                   // + ",'" + fileUrl + "',' '涓婁紶鎴愬姛fdfdfdf''" + ")");  
          //  out.println("</script>");  
          //  out.flush();  
           // out.close();  
            System.out.println("callback-->"+callback);
            System.out.println("fileUrl-->"+json);
           // response.sendRedirect(request.getContextPath()+"/ATextDao?a="+fileUrl);
            if (debug)  
                System.out.println("--- END DOPOST ---");  
        }  
        /** 
         * 获取文件名的方法 
         */  
        private static String getNameWithoutExtension(String fileName) {  
            return fileName.substring(0, fileName.lastIndexOf("."));  
        }  
        /** 
         * 获取扩展名的方法 
         */  
        private String getExtension(String fileName) {  
            return fileName.substring(fileName.lastIndexOf(".") + 1);  
        }  
        /** 
         * 字符串像ArrayList转化的方法 
         */   
        private ArrayList stringToArrayList(String str) {  
            if (debug)  
                System.out.println(str);  
            String[] strArr = str.split("\|");  
            ArrayList tmp = new ArrayList();  
            if (str.length() > 0) {  
                for (int i = 0; i < strArr.length; ++i) {  
                    if (debug)  
                        System.out.println(i + " - " + strArr[i]);  
                    tmp.add(strArr[i].toLowerCase());  
                }  
            }  
            return tmp;  
        }  
        /** 
         * 判断扩展名是否允许的方法 
         */   
        private boolean extIsAllowed(String fileType, String ext) {  
            ext = ext.toLowerCase();  
            ArrayList allowList = (ArrayList) allowedExtensions.get(fileType);  
            ArrayList denyList = (ArrayList) deniedExtensions.get(fileType);  
            if (allowList.size() == 0) {  
                if (denyList.contains(ext)) {  
                    return false;  
                } else {  
                    return true;  
                }  
            }  
            if (denyList.size() == 0) {  
                if (allowList.contains(ext)) {  
                    return true;  
                } else {  
                    return false;  
                }  
            }  
            return false;  
        }  
    }  

     web.xml

    <servlet>
        <servlet-name>SimpleUploader</servlet-name>
        <servlet-class>ckeditor.CKEditorUploadServlet</servlet-class>
        <init-param>
          <param-name>baseDir</param-name>
          <param-value>/UserFiles/</param-value>
        </init-param>
        <init-param>
          <param-name>debug</param-name>
          <param-value>true</param-value>
        </init-param>
        <init-param>
          <param-name>enabled</param-name>
          <param-value>true</param-value>
        </init-param>
        <init-param>
          <param-name>AllowedExtensionsFile</param-name>
          <param-value></param-value>
        </init-param>
        <init-param>
          <param-name>DeniedExtensionsFile</param-name>
          <param-value>  
                    html|htm|php|php2|php3|php4|php5|phtml|pwml|inc|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|com|dll|vbs|js|reg|cgi|htaccess|asis|ftl  
                </param-value>
        </init-param>
        <init-param>
          <param-name>AllowedExtensionsImage</param-name>
          <param-value>jpg|gif|jpeg|png|bmp</param-value>
        </init-param>
        <init-param>
          <param-name>DeniedExtensionsImage</param-name>
          <param-value></param-value>
        </init-param>
        <init-param>
          <param-name>AllowedExtensionsFlash</param-name>
          <param-value>swf|fla</param-value>
        </init-param>
        <init-param>
          <param-name>DeniedExtensionsFlash</param-name>
          <param-value></param-value>
        </init-param>
        <load-on-startup>0</load-on-startup>
      </servlet>
      <servlet-mapping>
        <servlet-name>SimpleUploader</servlet-name>
        <url-pattern>/ckeditor/uploader</url-pattern>
      </servlet-mapping>

    这样就能上传到你这个项目的文件夹下了,命令行有地址输出,

    至于所见即所得,html代码存入数据库就行,文本编辑器这自己写个form表单,写个servlet加入数据库就行了

  • 相关阅读:
    Docker 简单部署 ElasticSearch
    Anaconda更新失败简单解决[CondaHTTPError: HTTP 000 CONNECTION FAILED for url]
    TermKit的新一代Mac终端,在Ubuntu 11.04 轻松安装TermKit
    Linux下如何测试网速
    centos7安装yum
    Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?
    yum 安装指定版本Docker
    如何在 Apache Hive 中解析 Json 数组
    unzip解压失败( cannot find zipfile directory)
    Linux 定时任务crontab_014
  • 原文地址:https://www.cnblogs.com/ggrm/p/12328031.html
Copyright © 2011-2022 走看看