KindEditor上传本地图片

article/2025/9/24 11:33:19

自己动手配置了一下KindEditor文本编辑器上传本地图片的功能，不需要动手写action，相关详细配置和代码如下。
我用的是KindEditor 4.1.10的版本，需要用到的童鞋去下载对应的版本。

1.↓↓↓这个插件里面需要手动配置的两个重要的jsp文件。
这个插件里面需要手动配置的两个重要的jsp文件

2.↓↓↓需要你在WebRoot根目录下创建图片上传路径(必须创建不然会报目录不存在的错误-KindEditor的本地上传是把图片放到服务器里)。
必须创建的文件夹，

3.在对应的页面你需要引入的包还有相应的代码。
↓↓↓包
注意我用的是KindEditor4.1.10的版本！不知道各版本之间是不是通用的
↓↓↓代码
页面配置代码
4.文本区设置name值
↓↓↓代码
这里写图片描述
ok话不多说继续上代码。
5.引入缺失的jar包，从网上下载的几个版本的kindEditor我发现都缺一个叫
json_simple-1.1.jar的包，看情况是否要Build Path，反正我的机子不用2333
这里写图片描述

首先是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.json.simple.*" %>
<%/*** KindEditor JSP*///根目录路径，可以指定绝对路径，比如 /var/www/attached/
String rootPath = pageContext.getServletContext().getRealPath("/") + "attached/";
//根目录URL，可以指定绝对路径，比如 http://www.yoursite.com/attached/
String rootUrl  = request.getContextPath() + "/attached/";
//图片扩展名
String[] fileTypes = new String[]{"gif", "jpg", "jpeg", "png", "bmp"};String dirName = request.getParameter("dir");
if (dirName != null) {if(!Arrays.<String>asList(new String[]{"image", "flash", "media", "file"}).contains(dirName)){out.println("Invalid Directory name.");return;}rootPath += dirName + "/";rootUrl += dirName + "/";File saveDirFile = new File(rootPath);if (!saveDirFile.exists()) {saveDirFile.mkdirs();}
}
//根据path参数，设置各路径和URL
String path = request.getParameter("path") != null ? request.getParameter("path") : "";
String currentPath = rootPath + path;
String currentUrl = rootUrl + path;
String currentDirPath = path;
String moveupDirPath = "";
if (!"".equals(path)) {String str = currentDirPath.substring(0, currentDirPath.length() - 1);moveupDirPath = str.lastIndexOf("/") >= 0 ? str.substring(0, str.lastIndexOf("/") + 1) : "";
}//排序形式，name or size or type
String order = request.getParameter("order") != null ? request.getParameter("order").toLowerCase() : "name";//不允许使用..移动到上一级目录
if (path.indexOf("..") >= 0) {out.println("Access is not allowed.");return;
}
//最后一个字符不是/
if (!"".equals(path) && !path.endsWith("/")) {out.println("Parameter is not valid.");return;
}
//目录不存在或不是目录
File currentPathFile = new File(currentPath);
if(!currentPathFile.isDirectory()){out.println("Directory does not exist.");return;
}//遍历目录取的文件信息
List<Hashtable> fileList = new ArrayList<Hashtable>();
if(currentPathFile.listFiles() != null) {for (File file : currentPathFile.listFiles()) {Hashtable<String, Object> hash = new Hashtable<String, Object>();String fileName = file.getName();if(file.isDirectory()) {hash.put("is_dir", true);hash.put("has_file", (file.listFiles() != null));hash.put("filesize", 0L);hash.put("is_photo", false);hash.put("filetype", "");} else if(file.isFile()){String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();hash.put("is_dir", false);hash.put("has_file", false);hash.put("filesize", file.length());hash.put("is_photo", Arrays.<String>asList(fileTypes).contains(fileExt));hash.put("filetype", fileExt);}hash.put("filename", fileName);hash.put("datetime", new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(file.lastModified()));fileList.add(hash);}
}if ("size".equals(order)) {Collections.sort(fileList, new SizeComparator());
} else if ("type".equals(order)) {Collections.sort(fileList, new TypeComparator());
} else {Collections.sort(fileList, new NameComparator());
}
JSONObject result = new JSONObject();
result.put("moveup_dir_path", moveupDirPath);
result.put("current_dir_path", currentDirPath);
result.put("current_url", currentUrl);
result.put("total_count", fileList.size());
result.put("file_list", fileList);response.setContentType("application/json; charset=UTF-8");
out.println(result.toJSONString());
%>
<%!
public class NameComparator implements Comparator {public int compare(Object a, Object b) {Hashtable hashA = (Hashtable)a;Hashtable hashB = (Hashtable)b;if (((Boolean)hashA.get("is_dir")) && !((Boolean)hashB.get("is_dir"))) {return -1;} else if (!((Boolean)hashA.get("is_dir")) && ((Boolean)hashB.get("is_dir"))) {return 1;} else {return ((String)hashA.get("filename")).compareTo((String)hashB.get("filename"));}}
}
public class SizeComparator implements Comparator {public int compare(Object a, Object b) {Hashtable hashA = (Hashtable)a;Hashtable hashB = (Hashtable)b;if (((Boolean)hashA.get("is_dir")) && !((Boolean)hashB.get("is_dir"))) {return -1;} else if (!((Boolean)hashA.get("is_dir")) && ((Boolean)hashB.get("is_dir"))) {return 1;} else {if (((Long)hashA.get("filesize")) > ((Long)hashB.get("filesize"))) {return 1;} else if (((Long)hashA.get("filesize")) < ((Long)hashB.get("filesize"))) {return -1;} else {return 0;}}}
}
public class TypeComparator implements Comparator {public int compare(Object a, Object b) {Hashtable hashA = (Hashtable)a;Hashtable hashB = (Hashtable)b;if (((Boolean)hashA.get("is_dir")) && !((Boolean)hashB.get("is_dir"))) {return -1;} else if (!((Boolean)hashA.get("is_dir")) && ((Boolean)hashB.get("is_dir"))) {return 1;} else {return ((String)hashA.get("filetype")).compareTo((String)hashB.get("filetype"));}}
}
%>

然后是file_manager_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.json.simple.*" %>
<%/*** KindEditor JSP*///根目录路径，可以指定绝对路径，比如 /var/www/attached/
String rootPath = pageContext.getServletContext().getRealPath("/") + "attached/";
//根目录URL，可以指定绝对路径，比如 http://www.yoursite.com/attached/
String rootUrl  = request.getContextPath() + "/attached/";
//图片扩展名
String[] fileTypes = new String[]{"gif", "jpg", "jpeg", "png", "bmp"};String dirName = request.getParameter("dir");
if (dirName != null) {if(!Arrays.<String>asList(new String[]{"image", "flash", "media", "file"}).contains(dirName)){out.println("Invalid Directory name.");return;}rootPath += dirName + "/";rootUrl += dirName + "/";File saveDirFile = new File(rootPath);if (!saveDirFile.exists()) {saveDirFile.mkdirs();}
}
//根据path参数，设置各路径和URL
String path = request.getParameter("path") != null ? request.getParameter("path") : "";
String currentPath = rootPath + path;
String currentUrl = rootUrl + path;
String currentDirPath = path;
String moveupDirPath = "";
if (!"".equals(path)) {String str = currentDirPath.substring(0, currentDirPath.length() - 1);moveupDirPath = str.lastIndexOf("/") >= 0 ? str.substring(0, str.lastIndexOf("/") + 1) : "";
}//排序形式，name or size or type
String order = request.getParameter("order") != null ? request.getParameter("order").toLowerCase() : "name";//不允许使用..移动到上一级目录
if (path.indexOf("..") >= 0) {out.println("Access is not allowed.");return;
}
//最后一个字符不是/
if (!"".equals(path) && !path.endsWith("/")) {out.println("Parameter is not valid.");return;
}
//如果页面上报错目录不存在，可以在这里打断点看看是不是能走到这一步,请自行在在WebRoot目录下创建attached文件夹
//目录不存在或不是目录
File currentPathFile = new File(currentPath); 
if(!currentPathFile.isDirectory()){out.println("Directory does not exist.");return;
}//遍历目录取的文件信息
List<Hashtable> fileList = new ArrayList<Hashtable>();
if(currentPathFile.listFiles() != null) {for (File file : currentPathFile.listFiles()) {Hashtable<String, Object> hash = new Hashtable<String, Object>();String fileName = file.getName();if(file.isDirectory()) {hash.put("is_dir", true);hash.put("has_file", (file.listFiles() != null));hash.put("filesize", 0L);hash.put("is_photo", false);hash.put("filetype", "");} else if(file.isFile()){String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();hash.put("is_dir", false);hash.put("has_file", false);hash.put("filesize", file.length());hash.put("is_photo", Arrays.<String>asList(fileTypes).contains(fileExt));hash.put("filetype", fileExt);}hash.put("filename", fileName);hash.put("datetime", new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(file.lastModified()));fileList.add(hash);}
}if ("size".equals(order)) {Collections.sort(fileList, new SizeComparator());
} else if ("type".equals(order)) {Collections.sort(fileList, new TypeComparator());
} else {Collections.sort(fileList, new NameComparator());
}
JSONObject result = new JSONObject();
result.put("moveup_dir_path", moveupDirPath);
result.put("current_dir_path", currentDirPath);
result.put("current_url", currentUrl);
result.put("total_count", fileList.size());
result.put("file_list", fileList);response.setContentType("application/json; charset=UTF-8");
out.println(result.toJSONString());
%>
<%!
public class NameComparator implements Comparator {public int compare(Object a, Object b) {Hashtable hashA = (Hashtable)a;Hashtable hashB = (Hashtable)b;if (((Boolean)hashA.get("is_dir")) && !((Boolean)hashB.get("is_dir"))) {return -1;} else if (!((Boolean)hashA.get("is_dir")) && ((Boolean)hashB.get("is_dir"))) {return 1;} else {return ((String)hashA.get("filename")).compareTo((String)hashB.get("filename"));}}
}
public class SizeComparator implements Comparator {public int compare(Object a, Object b) {Hashtable hashA = (Hashtable)a;Hashtable hashB = (Hashtable)b;if (((Boolean)hashA.get("is_dir")) && !((Boolean)hashB.get("is_dir"))) {return -1;} else if (!((Boolean)hashA.get("is_dir")) && ((Boolean)hashB.get("is_dir"))) {return 1;} else {if (((Long)hashA.get("filesize")) > ((Long)hashB.get("filesize"))) {return 1;} else if (((Long)hashA.get("filesize")) < ((Long)hashB.get("filesize"))) {return -1;} else {return 0;}}}
}
public class TypeComparator implements Comparator {public int compare(Object a, Object b) {Hashtable hashA = (Hashtable)a;Hashtable hashB = (Hashtable)b;if (((Boolean)hashA.get("is_dir")) && !((Boolean)hashB.get("is_dir"))) {return -1;} else if (!((Boolean)hashA.get("is_dir")) && ((Boolean)hashB.get("is_dir"))) {return 1;} else {return ((String)hashA.get("filetype")).compareTo((String)hashB.get("filetype"));}}
}
%>

然后是你对应的三段页面代码

<link rel="stylesheet" href="kindeditor/themes/default/default.css"/>
<script charset="utf-8" src="kindeditor/kindeditor-min.js"></script>
<script charset="utf-8" src="kindeditor/lang/zh_CN.js"></script>
<script language="javascript" type="text/javascript">KindEditor.ready(function(K) {var  editor1 = K.create('textarea[name="sysArticle.articleContent"]', {resizeType : 1, //这里的name属性值和下面的对应，你改成你项目用的name属性值allowPreviewEmoticons : false,allowImageUpload : true, //打开本地上传图片功能items : ['source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'cut', 'copy', 'paste','plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright','justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript','superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/','formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold','italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|','table', 'hr','image'],//image打开本地上传图片必须写,重要的事情说三遍afterBlur : function() {   this.sync();  //焦点问题，这里不写会出问题.同步KindEditor的值到textarea文本框      }});                     });</script>
<textarea  style="width:400px;height:200px;"  name="sysArticle.articleContent"></textarea> 
<!-- 请自行设置文本区大小,但注意这里name属性值和上面那张图里的name值对应 -->

ok，到这里就大功告成了！
来看看我的效果图吧
这里写图片描述

这里写图片描述
这里我推荐使用copy js源码放到在线代码格式里看http://tool.oschina.net/codeformat/js/
在线代码格式化效果图
这里写图片描述

刚实习第三个月累死喵了！！！！


http://chatgpt.dhexx.cn/article/iUOS3IKj.shtml

相关文章

kindeditor4.1.10图片上传配置及使用说明

kindeditor4.1.10图片上传配置及使用说明

1效果展示 1.1 点击图片上传按钮 1.2 弹出选择框，可以从已上传的图片中选择上传，也可以从本地上传。 1.3选择从图片空间上传，文件夹模式浏览所有已上传的图片 1.4从本地选择图片上传 1.5上传效果 1.6 上传路径： WebRoot/upload/image 2-1：kindeditor-4.1.10版本插件 2-2：…
阅读更多...
onpaste事件的浅谈

onpaste事件的浅谈

今天看书的时候&#xff0c;偶然看到onpaste的这个属性所以记录下来&#xff0c;为以后查阅而用&#xff1a; 具体的用法是<input type“text” οnpaste"function ***"/>&#xff0c;标签只是用来做说明并不是非得是input标签 虽然是触发的条件是&#xff1…
阅读更多...
手机html粘贴事件,详解浏览器中的粘贴事件 paste onpaste 事件

手机html粘贴事件,详解浏览器中的粘贴事件 paste onpaste 事件

在最新的H5 API里已经有了对粘贴事件的支持, 事件名为paste, 平时用的较少,但最近想做一个粘贴板管理器,于是就调研了一下这个粘贴,复制事件. 那么调研的第一步是什么那? 当然是百度了,但高手都不百度,直接控制台调试 创建一个id为editor的文本域, 为其添加一个paste事件的…
阅读更多...
onkeyup事件，onpaste事件，完成实时表单验证

onkeyup事件，onpaste事件，完成实时表单验证

先上效果图&#xff1a; input框&#xff0c;用户输入值的方式就两种&#xff0c;一种是键盘输入&#xff0c;一种是鼠标粘贴。onkeyup事件可以在键盘输入的时候绑定事件&#xff0c;onpaste"return false"&#xff0c;设置不允许粘贴。 onkeyup进行表单验证的优…
阅读更多...
利用JavaScript从剪贴板获取图片并上传服务器

利用JavaScript从剪贴板获取图片并上传服务器

1、参考&#xff1a; 使用 JavaScript File API 实现文件上传FileReader.readAsDataURL()基于Servlet3的文件上传中的示例2&#xff1a;基于JQuery的单文件上传 2、onpaste 剪贴板事件 onpaste 事件在用户向元素中粘贴文本时触发。有三种方式可以在元素中粘贴内容&#xff1…
阅读更多...
Internet协议的安全性

Internet协议的安全性

网际层 安全问题 1.IP数据报在传递过程中被窃取 措施&#xff1a;读ip数据报进行加密 2.数据净荷可能被截取后修改 措施&#xff1a;对ip数据净荷进行完整性检测 3. 攻击者发送伪造源地址数据包欺骗接收者&#xff0c;也称为ip欺骗 措施&#xff1a;对数据包的源地址鉴别 4. A…
阅读更多...
winget InternetOpenUrl() failed. 0x80072f7d

winget InternetOpenUrl() failed. 0x80072f7d

今天使用 winget 安装东西的时候提示&#xff1a; 尝试更新源时失败&#xff1a; winget 执行此命令时发生意外错误&#xff1a; InternetOpenUrl() failed. 0x80072f7d : unknown error对于我而言是因为其他原因关闭了 tls 1.2&#xff0c;在控制面板->网络和 Internet-&g…
阅读更多...
Internet网际协议 --- IP地址

Internet网际协议 --- IP地址

IP地址 一.IP地址简介二.分类IP地址三.IP子网划分与子网掩码四.无类域间路由CIDR五.路由聚合六.IP包转发 一.IP地址简介 1.IP地址&#xff0c;网络上的每一台主机&#xff08;或路由器&#xff09;的每一个接口都会分配一个全球唯一的32位的标识符。 2.将IP地址划分为固定的类…
阅读更多...
HTTP-web-Internet

HTTP-web-Internet

互联网&#xff08;Internet&#xff09; 互联网&#xff1a;将全球计算机互联在一起的网络。目前最流行的实现协议是TCP/IP。 万维网&#xff08;WWW&#xff09; 万维网&#xff1a;基于HTTP协议实现全球性、动态交互、跨平台的分布式图形信息系统。是互联网上应用最为广泛的…
阅读更多...
internet协议

internet协议

1&#xff1a;引言 IP时TCP/IP中的核心协议IP提供了一种尽力而为&#xff0c;无连接的数据报交付服务 2&#xff1a;IP头部 正常的IPV4头部大小为20字节。除非存在选项&#xff08;少见&#xff09;IPV6的长度是40字节&#xff0c;没有选项字段&#xff0c;IPV6有扩展头部 …
阅读更多...
Internet网际协议---IPv4协议

Internet网际协议---IPv4协议

IPv4协议 一.IPv4协议简介二.IPv4数据报格式&#xff08;由首部和数据组成&#xff09;三.数据报分片与重组四.IP协议功能及报头字段总结 一.IPv4协议简介 1.IPv4协议&#xff1a;网际协议版本4&#xff0c;一种无连接的协议&#xff0c;是互联网的核心&#xff0c;也是使用最…
阅读更多...
网络Internet

网络Internet

前言 加油 原文 网络常用会话 ❶ This online store discounted all computers for sale. 该网店削价出售全部待售的电脑。 ❷ The latest laptop is very portable. 最新的这款笔记本很便携。 ❸ Add up the figures in this column. 把这一栏的数字合计一下。 ❹ Consu…
阅读更多...
Internet协议——IP

Internet协议——IP

IP Internet协议——IPIP协议与tcp/IP的关系IP地址的表示IP地址的特点地址转换——ARP反向地址转换——RARP计算子网掩码 IP数据报的格式IP数据报首部的固定部分 Internet协议——IP IP&#xff1a;通信子网的最高层。提供无连接的数据报传输机制。IP协议是点到点&#xff0c;…
阅读更多...
InternetOpen InternetOpenUrl InternetReadFile 和 InternetCloseHandle

InternetOpen InternetOpenUrl InternetReadFile 和 InternetCloseHandle

文章目录 InternetOpen函数功能函数声明第一个参数第二个参数第三个参数第四个参数第五个参数返回值补充&#xff1a;InternetOpenUrl函数功能函数声明第一个参数第二个参数第三个参数第四个参数第五个参数第六个参数返回值补充补充InternetReadFile函数功能函数声明第一个参数…
阅读更多...
juniper设备日常操作指南

juniper设备日常操作指南

1、日常show操作 # show 查看所有配置 # show | display set 查看set格式的所有配置 # show system | display set 查看set格式的system层级配置 # show system login | display set 查看set格式的system层级下的login层级配置# run show version # run show route 1.1.1.…
阅读更多...
这几个juniper巡检命令超实用

这几个juniper巡检命令超实用

1. CPU利用率核查 show chassis routing-engine2. MEM利用率核查 show chassis routing-engine3. OSPF邻居关系核查 show ospf neighbor4. LDP端口状态检查 show ldp interface5. ISIS邻居关系检查 show isis adjacency6. BGP邻居关系检查 show bgp neighbor7. HSRP信息检…
阅读更多...
Juniper

Juniper

Juniper Networks[编辑] Juniper Networks公司类型 上市&#xff08;NYSE&#xff1a;JNPR&#xff09;成立1996年2月代表人物执行长&#xff1a;Shaygan Kheradpir 技术长&#xff1a;Pradeep Sindhu 董事长&#xff1a;Scott Kriens总部地点 加州森尼韦尔&#xff08;Sunnyva…
阅读更多...
Juniper入门之RIP

Juniper入门之RIP

拓扑 配置 JUNOS-1 #配置接口 interfaces {em2 {unit 10 {family inet { address 12.1.1.1/24;}}}lo0 {unit 10 {family inet {address 1.1.1.1/32;}}} } protocols {rip {import import-policy;group rip-group {export export-policy;neighbor em2.10 {send …
阅读更多...
Juniper Radius And Tacacs Server 认证测试

Juniper Radius And Tacacs Server 认证测试

1. 简述 Juniper产品支持Radius、Tacacs及本地Password认证。根据不同的用户需求&#xff0c;3A服务器认证可能会结合域用户、LDAP、RSA-Token等认证服务器进行综合认证。此测试报告使用Juniper VSRX和Cisco ACS5.2验证3A相关认证选项。 2. 测试拓扑 使用Vmware workstation 9…
阅读更多...
Juniper-SRX-基于域控认证的用户防火墙

Juniper-SRX-基于域控认证的用户防火墙

目录 1&#xff1a;架构与环境说明 2&#xff1a;防火墙基础配置 3&#xff1a;Win-server部署 4&#xff1a;SRX-加域流量放行 5&#xff1a;Client相关域设置 6&#xff1a;Win-server联动SRX的相关设置 7&#xff1a;SRX-外部Server配置 8&#xff1a;SRX域控认证策略…
阅读更多...
推荐文章

Copyright @ 2022~2023