富文本可上传图片版

  经过几次的运用,需求的增加。对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="width: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("上传文件扩展名是不允许的扩展名。\n只允许" + 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(); }%>

 

posted @ 2015-08-11 16:15  红色小宇宙  阅读(632)  评论(0编辑  收藏  举报