zoukankan      html  css  js  c++  java
  • 富文本可上传图片版

      经过几次的运用,需求的增加。对KindEditor文本编辑框多了几分了解。首先是图片的上传功能。其次是对文章的重新编译

    直接贴代码;

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <link rel="stylesheet"  href="../css/xinwenyemian.css" >
        <script charset="utf-8" src="kindeditor.js"></script>
        <script charset="utf-8" src="lang/zh_CN.js"></script>
        <script charset="utf-8" src="plugins/code/prettify.js"></script>
        <script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
        <script>    
            KindEditor.ready(function(K) {
                var editor1 = K.create('textarea[name="content1"]', {
                    cssPath : '../plugins/code/prettify.css',    //这里表示编译框的css修饰
                    uploadJson : '../jsp/upload_json.jsp',    //这里是图片上传的jsp(图片上传框点击确认提交会去该jsp)
                    fileManagerJson : '../jsp/file_manager_json.jsp',    //文件上传的jsp
                    allowFileManager : true,
                    afterCreate : function() {
                        var self = this;
                        K.ctrl(document, 13, function() {
                            self.sync();
                            document.forms['example'].submit();
                        });
                        K.ctrl(self.edit.doc, 13, function() {
                            self.sync();
                            document.forms['example'].submit();
                        });
                    }
                });
            });     
    editor1.html("后台传入的数据")   //这里是把后台的数据赋值到文本编译框中。 
    </script> 
    </head>
    <body>
    <div class="all">
    <form name="example" id="action" method="post" action="http://123.59.24.94:9990/sssss"> <!-- <form name="example" id="action" method="post" action="/bbs/accountController/gameTie.do">、-->
    <div>选择总类<select id="xwselect" name="type"> <option value="最新">最新</option> <option value="新闻">新闻</option> <option value="公告">公告</option> <option value="活动">活动</option> </select> </div> <div class="title"> 标题:<input class="titleinput" type="text" name="title"/></div> <div> 内容简介<input class="titleinput" type="text" name="jie"/></div>
    <textarea id="pic" name="content1" cols="100" rows="8" style="700px;height:200px;visibility:hidden; "></textarea> <br />
    <input type="submit" name="button" value="提交内容" />
    </form>
    </div>
    </body>
    </html>
    upload_json.jsp

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="java.util.*,java.io.*"%> <%@ page import="java.text.SimpleDateFormat"%> <%@ page import="org.apache.commons.fileupload.*"%> <%@ page import="org.apache.commons.fileupload.disk.*"%> <%@ page import="org.apache.commons.fileupload.servlet.*"%> <%@ page import="org.json.simple.*"%> <% /** * KindEditor JSP * * 本JSP程序是演示程序,建议不要直接在实际项目中使用。 * 如果您确定直接使用本程序,使用之前请仔细确认相关安全设置。 * */ //文件保存目录路径 String savePath = pageContext.getServletContext().getRealPath("/") + "linhunzhangehoutai\attached/"; System.out.println(savePath); //文件保存目录URL String saveUrl = request.getContextPath() + "\linhunzhangehoutai\attached/"; System.out.println(saveUrl); //定义允许上传的文件扩展名 HashMap<String, String> extMap = new HashMap<String, String>(); extMap.put("image", "gif,jpg,jpeg,png,bmp"); //extMap.put("flash", "swf,flv"); //extMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb"); //extMap.put("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2"); //最大文件大小 long maxSize = 1000000; response.setContentType("text/html; charset=UTF-8"); if (!ServletFileUpload.isMultipartContent(request)) { out.println(getError("请选择文件。")); return; } //检查目录 File uploadDir = new File(savePath); if (!uploadDir.isDirectory()) { out.println(getError("上传目录不存在。")); return; } //检查目录写权限 if (!uploadDir.canWrite()) { out.println(getError("上传目录没有写权限。")); return; } String dirName = request.getParameter("dir"); if (dirName == null) { dirName = "image"; } if (!extMap.containsKey(dirName)) { out.println(getError("目录名不正确。")); return; } //创建文件夹 savePath += dirName + "/"; saveUrl += dirName + "/"; File saveDirFile = new File(savePath); if (!saveDirFile.exists()) { saveDirFile.mkdirs(); } SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd"); String ymd = sdf.format(new Date()); savePath += ymd + "/"; saveUrl += ymd + "/"; File dirFile = new File(savePath); if (!dirFile.exists()) { dirFile.mkdirs(); } FileItemFactory factory = new DiskFileItemFactory(); ServletFileUpload upload = new ServletFileUpload(factory); upload.setHeaderEncoding("UTF-8"); List items = upload.parseRequest(request); Iterator itr = items.iterator(); while (itr.hasNext()) { FileItem item = (FileItem) itr.next(); String fileName = item.getName(); long fileSize = item.getSize(); if (!item.isFormField()) { //检查文件大小 if (item.getSize() > maxSize) { out.println(getError("上传文件大小超过限制。")); return; } //检查扩展名 String fileExt = fileName.substring( fileName.lastIndexOf(".") + 1).toLowerCase(); if (!Arrays.<String> asList(extMap.get(dirName).split(",")) .contains(fileExt)) { out.println(getError("上传文件扩展名是不允许的扩展名。 只允许" + extMap.get(dirName) + "格式。")); return; } SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss"); String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt; try { File uploadedFile = new File(savePath, newFileName); item.write(uploadedFile); } catch (Exception e) { out.println(getError("上传文件失败。")); return; } JSONObject obj = new JSONObject(); System.out.println(saveUrl + newFileName); obj.put("error", 0); obj.put("url", saveUrl + newFileName); out.println(obj.toJSONString()); } } %> <%!private String getError(String message) { JSONObject obj = new JSONObject(); obj.put("error", 1); obj.put("message", message); return obj.toJSONString(); }%>
  • 相关阅读:
    maven 的依赖包的版本更改之后,项目启动报错,相关联的资源没有在tomcat里面加载
    Maven更新后本地仓库jar后缀带有 lastUpdated
    spring+mybatis之声明式事务管理初识(小实例)
    java 详解类加载器的双亲委派及打破双亲委派
    jvm内存溢出区域和排查方法
    JVM中的新生代和老年代(Eden空间、两个Survior空间)
    什么情况下会发生堆内存溢出,栈内存溢出,结合实例说明
    投而死面试
    检查性异常
    多线程系列课程
  • 原文地址:https://www.cnblogs.com/sanhuan/p/4721332.html
Copyright © 2011-2022 走看看