kindeditor图片上传 jsp版
经过了那么长时间的搜索,看了好多有关kindeditor图片上传的东西,各种方法也试过了,但总是报服务器发生障碍,今天终于解决了!!!拿出来给大家分享!!!
首先在官网下载kindeditor压缩包,(我这里用的是kindeditor-3-5-5-zh-CN.zip),解压开,把jsp、plugins、skins、kindeditor.js 、kindedditor-min.js放进自己的项目中(我是放在webroot下面新建的文件夹kindeditor下面的),其他的可以不放。
然后修改image.html,把原来的(php版)改为 var imageUploadJson = (typeof KE.g[id].imageUploadJson == 'undefined') ? '../../jsp/upload_json.jsp': KE.g[id].imageUploadJson; 接着把原来的upload_json.jsp改为如下所示:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page import="org.apache.struts2.dispatcher.multipart.MultiPartRequestWrapper"%>
<%@page import="java.util.concurrent.locks.*"%><%@page import="java.io.*"%>
<%@ page import="org.json.simple.*"%>
<%
//Struts2 请求 包装过滤器
MultiPartRequestWrapper wrapper=(MultiPartRequestWrapper)request;
//获得上传的文件名
String fileName = wrapper.getFileNames("imgFile")[0];
//获得未见过滤器
File file = wrapper.getFiles("imgFile")[0];
//----------从新构建上传文件名---------
final Lock lock = new ReentrantLock();String newName = null;lock.lock();
try{
//加锁为防止文件名频频
newName = System.currentTimeMillis() +fileName.substring(fileName.lastIndexOf("."), fileName.length());}finally{lock.unlock();}
//获取文件输出流
FileOutputStream fos = new FileOutputStream(request.getSession().getServletContext().getRealPath("/")+"attached/" + newName);//设置 KE 中的图片文件地址
String newFileName = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ request.getContextPath() + "/attached/" + newName;byte[] buffer = new byte[1024];//获取内存中当前文件输入流
InputStream in = new FileInputStream(file);try{int num = 0;while((num = in.read(buffer)) > 0){fos.write(buffer,0,num);}}catch(Exception e){e.printStackTrace(System.err);}finally{in.close();fos.close();}//发送给 KE
JSONObject obj = new JSONObject();
obj.put("error", 0);
obj.put("url", newFileName);
out.println(obj.toJSONString());
%>
其中attached为图片保存的路径,我的位于webroot下面。
再在使用kindeditor编辑器的页面中加入以下代码:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
request.setCharacterEncoding("UTF-8");
String htmlData = request.getParameter("addtg") != null ? request.getParameter("addtg") : "";
%>
<script type="text/javascript">
KE.show({
id : 'tg',//TEXTAREA输入框的ID
imageUploadJson : '../../jsp/upload_json.jsp', //注意路径别写错!!
fileManagerJson : '../../jsp/file_manager_json.jsp',
allowFileManager : true,
allowUpload : true, //允许上传图片
afterCreate : function(id) {
KE.event.ctrl(document, 13, function() {
KE.util.setData(id);
document.forms['example'].submit();
});
KE.event.ctrl(KE.g[id].iframeDoc, 13, function() {
KE.util.setData(id);
document.forms['example'].submit();
});
}
});
</script>
<textarea id="tg" name="tg" style="width:550px;height:200px;visibility:hidden;"></textarea>
<input type="button" class="button_01" value="保 存" οnclick="updateSubmit();">
如此,就可以实现图片上传了!!!希望对大家有用!!同时也作为自己的经验收藏!(*^__^*) 嘻嘻……
kindeditor图片上传 jsp版相关推荐
- kindeditor图片上传 struts2实现
一.kindeditor以及struts2部署搭建不再赘述,如须要请參考kindeditor用法 Struts2框架搭建 二.kindeditor图片上传所依赖jar包在kindeditor\jsp\ ...
- kindeditor图片上传
KindEditor是一款用Javascript编写的开源在线HTML编辑器,主要用户是让用户在网站上获得可见即可得的编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(texta ...
- KindEditor图片上传路径URL的处理
最近的项目中使用了KindEditor作为富文本编辑器进行文本编辑处理.KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEd ...
- kindeditor图片上传配置水印
先上效果图 网上有帖子说初始化了编辑器后就无法更改设置,其实是可以的.只不过不再是修改那些初始化参数了. <script> KindEditor.ready(function (K) ...
- kindeditor(一)实现图片上传jsp实现
最近应项目需求要求实现富文本编辑器的功能,曾经用ckeditor实现过,首先尝试用它实现,但是虽然ck有强大的功能,但是其界面风格比较刻板,修改起来比较困难而且,图片上传功能修改源码的话很繁琐,自己也 ...
- Kindeditor图片上传Controller
asp.net MVC Kindeditor 图片.文件上传所用的Controller 1 [HttpPost, AllowAnonymous] 2 public ActionResult Uploa ...
- h5上传图片html5,h5图片上传简易版(FileReader+FormData+ajax)
一.选择图片(input的file类型) 1. input的file类型会渲染为一个按钮和一段文字.点击按钮可打开文件选择窗口:file类型的input会有files属性,保存着文件的相关信息. 2. ...
- 从零基础认识KindEditor实现图片上传
KindEditor图片上传 一般用户访问系统,使用上传图片功能,那么图片就上传到你的当前项目所在的tomcat服务器上,在/image下,上传成功后用户可以直接访问http://ip:port/pr ...
- kindeditor4.1.10图片上传配置及使用说明
1效果展示 1.1 点击图片上传按钮 1.2 弹出选择框,可以从已上传的图片中选择上传,也可以从本地上传. 1.3选择从图片空间上传,文件夹模式浏览所有已上传的图片 1.4从本地选择图片上传 1.5上 ...
最新文章
- oracle中计算某月的天数
- vagrant --- vagrant部署环境
- SAP Hybris电子商务最新功能
- Just enough(刚刚好)的软件开发文档什么样?
- Educational Codeforces Round 62(CF1140)
- Python入门--字典的创建
- 一次编译安装SENginx 的小经历.....
- lammps教程:fix setforce命令详解
- Word2016--显示/隐藏书签、批量删除书签
- 使用 ActiveReports 报表工具,动态创建报表模板
- RFC2544时延测试——信而泰网络测试仪实操
- scrapy中文网学习笔记
- 前端——“一看就会的”菜鸟教程网站首页制作!
- 6种php加密解密方法
- java for 死循环_关于java编程死循环的应用
- 高并发数据缓存池(基于EHcache)
- Swift 基础 高阶函数 forEach filter map compactMap compactMapValues flatMap reduce sort sorted shuffled ...
- 等保2.0:这些等保测评要求,你都知道吗?
- 简单BFS 紫书 UVA 1600 巡逻机器人(Patrol Robot)
- Qt TCP/UDP局域网通信软件 模仿QQ TIM
热门文章
- 如何做好固定资产管理和盘点?切实可行的方案来了
- Jenkins2.249-自定义插件安装(十一)
- 3GPP TS 23501-g51 中英文对照 | 4.3.3 Interworking between 5GC via non-3GPP access and E-UTRAN connected t
- 手机APP测试(三)
- jQuery中的end()方法
- jQuery插件开发全解析,jQuery.extend , (function($){ , $.fn.pluginName
- Ubuntu 常用命令
- 点分治+CDQ分治+整体二分全纪录
- 客户网站中经常用到的英文
- 毫米波雷达处理流程、算法、代码合集