给客户制作的项目中需要添加富文本,从网上看了一下很多人推荐kindeditor这个编辑器,用了之后也感觉不错,有一些问题的就是上传图片的时候遇到了一些问题,在这里记录一下,也方便以后查看。

  首先在官网下载kindeditor压缩包,(我这里用的是kindedito-4.1.7),解压开,把jsp、 plugins、skins、kindeditor.js 、kindedditor-min.js放进自己的项目中(我是放在webroot下面新建的文件夹kindeditor下面的),其他的可以不放。

  下载的压缩包中有demo我们可以参考一下,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.*" %>
<% //文件保存目录路径
String savePath = pageContext.getServletContext().getRealPath("/") + "attached/"; //文件保存目录URL
String saveUrl = request.getContextPath() + "/attached/"; //定义允许上传的文件扩展名
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();
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();
}
%>

  在我们使用kindeditor的页面添加如下代码,其中item是选项卡,这里根据自己的需要添加选项。

<script charset="utf-8" src="../js/kindeditor-4.1.7/kindeditor.js"></script>
<script charset="utf-8" src="../js/kindeditor-4.1.7/lang/zh_CN.js"></script> KindEditor.ready(function(K) {
window.editor = K.create('#editor_id', { items : ['source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', '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', '|', 'image',
'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
'anchor', 'link', 'unlink', '|', 'about'],afterChange : function() {
this.sync();
}
}
);
});

  然后修改Plugins——>image——>image.js

  将其中的

  uploadJson = K.undef(self.uploadJson, self.basePath + 'php/upload_json.php'),

  修改为

  uploadJson = K.undef(self.uploadJson, self.basePath + 'jsp/upload_json.jsp'),

  最后不要忘记在我们tomcat目录下新建一个名为attached的目录来存放我们的图片。之所以取名为attached是因为在upload_json.jsp中默认存储图片的文件夹名为attached。自己的这个方法也是摸索着来,希望能够和大家交流。

作者:杰瑞教育
出处:http://www.cnblogs.com/jerehedu/ 
本文版权归烟台杰瑞教育科技有限公司和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
 

使用Kindeditor上传图片的更多相关文章

  1. kindeditor 上传图片失败问题总结

    1.近段时间一直在处理kindeditor上传图片失败的问题,前期一直以为是前端的问题,利用谷歌控制台,打断点,修改方法,一直都找不到解决方案,直到查看服务器配置,才发现: WEB 1号服务器 /da ...

  2. (转) 淘淘商城系列——解决KindEditor上传图片浏览器兼容性问题

    http://blog.csdn.net/yerenyuan_pku/article/details/72808229 上文我们已实现了图片上传功能,但是有个问题,那就是对浏览器兼容性不够,因为Map ...

  3. Kindeditor上传图片到七牛云存储插件(PHP版)

    由于工作需要,要使用第三方存储作为图床,发现七牛云挺不错,又可以免费使用10G的空间,决定先试试. 项目中使用的是Kindeditor作为网页编辑器的,七牛云的插件里没有现成的Kindeditor的插 ...

  4. kindeditor上传图片时候,上传成功了,但是页面上却提示失败

    今天尝试着kindeditor做一个上传demo,碰到了一个日狗的问题,百度谷歌都没有答案,最后查看源码才发现问题所在,记录一下,福利大众. 碰到问题如下,图片后台明明上传成功了,返回信息也是正确的, ...

  5. KindEditor上传图片

    <script type="text/javascript"> KindEditor.ready(function(K) { var editor1 = K.creat ...

  6. KindEditor 上传图片浏览器兼容性问题

    1.使用 KindEditor 的图片上传插件时,需要返回如下格式的 JSON 数据 //成功时 { "error" : 0, "url" : "ht ...

  7. kindeditor 上传图片 显示绝对 路径

    在前台页面上 效果图 另外附上 urlType 属性的 参数说明: 改变站内本地URL,可设置空.relative.absolute.domain. 空为不修改URL,relative为相对路径,ab ...

  8. kindeditor上传图片的大小在哪控制

    请修改修改了multiimage.js 的imageSizeLimit = K.undef(self.imageSizeLimit, '3MB') 大小设置级可以

  9. KindEditor上传图片无法使用绝对路径

    之前百度,一直查到的都是urlType使用domain,但是根本没有效果.想着去插件代码里面看,但是实在看不下去了. 最后还是百度去了.然后查到下面的一个方法.直接将其中的某部分代码注释到就好了.具体 ...

随机推荐

  1. @NamedEntityGraphs --JPA按实体类对象参数中的字段排序问题得解决方法

    JPA按实体类对象参数中的字段排序问题得解决方法@Entity @Table(name="complaints") @NamedEntityGraphs({ @NamedEntit ...

  2. bs和cs

    CS(Client/Server):客户端----服务器结构.C/S结构在技术上很成熟,它的主要特点是交互性强.具有安全的存取模式.网络通信量低.响应速度快.利于处理大量数据.因为客户端要负责绝大多数 ...

  3. “通用类型系统”(CTS)

    一.什么是“通用类型系统”(CTS) 描述类型的定义和行为 二.CTS规范 一个类型可以包含零个或者多个成员1,成员①字段(Field)作为对象状态一部分的数据变量.字段根据名称和类型来区分②方法(M ...

  4. leetcode 链表 两数相加

     两数相加     给定两个非空链表来表示两个非负整数.位数按照逆序方式存储,它们的每个节点只存储单个数字.将两数相加返回一个新的链表. 你可以假设除了数字 0 之外,这两个数字都不会以零开头. 示例 ...

  5. [IOI2007]Miners

    [IOI2007]Miners 题目大意: 两个人吃东西,总共有\(3\)种食物,每个人每次吃到食物时可以获得的收益是当前食物和前两次吃的食物中,不同食物的种数.现在给定一个长度为\(n(n\le10 ...

  6. bzoj 1492

    这道题真好... 首先,感觉像DP,但是如果按照原题意,有无数个状态,每个状态又有无数个转移. 然后思考,我们每次买一部分和卖一部分的原因是什么,如果没有那个比例(就是rate=1恒成立),那么很容易 ...

  7. yyyy-MM-dd HH:mm:ss is Invalid Date in Safari, IE等浏览器下

    一.踩坑背景 在做某个项目的过程中,系统要求兼容safari,在使用Element-ui情况下,用到了datepicker组件,但是datepicker在type为daterange情况下,页面首次加 ...

  8. 使用ViewPager实现android软件使用向导的功能

    现在的大部分android软件,都是使用说明,就是第一次使用该软件时,会出现向导,可以左右滑动,然后就进入应用的主界面了. 先看下效果图: 首先需要一个布局文件,是FlameLayout组成的,里面包 ...

  9. ZOJ 3622 Magic Number 打表找规律

    A - Magic Number Time Limit:2000MS     Memory Limit:32768KB     64bit IO Format:%lld & %llu Subm ...

  10. NOIP 2002提高组 选数 dfs/暴力

    1008 选数 2002年NOIP全国联赛普及组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 已知 n 个整数 x1,x2,…, ...