使用的是asp.net MVC 上传图片。

1.下载Kindeditor的对应的包

2.html页面

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>UploadByKindeditor</title>

    <script src="~/Scripts/jquery-1.8.2.min.js"></script>

    <script src="~/Content/KindEditor/kindeditor.js"></script>

    <script src="~/Content/KindEditor/plugins/image/image.js"></script>

    <script type="text/javascript">

        var editor;

        var options = {

            uploadJson: '/BusinessPublic/UploadImage',   // (BusinessPublic,UploadImage为Action，下同) 上传图片

            fileManagerJson: '/BusinessPublic/UploadFile',    //上传文件

            allowFileManager: true,

        width: "100%", //编辑器的宽度为100%

        height: "250px", //编辑器的高度为100px

        filterMode: false, //不会过滤HTML代码

        resizeMode: 1 //编辑器只能调整高度

        };

        $(function () {

            editor = KindEditor.create('#content', options);

        });

    </script>

</head>

<body>

    <div>

            内容:<textarea id="content" name="content" style="height:300px;"></textarea>

    </div>

</body>

</html>

3.后台Action代码： 使用post提交 （上传文件都是使用post方式）

        [HttpPost]

        public ActionResult UploadImage()

        {

            string savePath = "/Resource/KindeditorImage/";

            string fileTypes = "gif,jpg,jpeg,png,bmp";

            int maxSize = ;

            Hashtable hash = new Hashtable();

            HttpPostedFileBase file = Request.Files["imgFile"];

            if (file == null)

            {

                hash = new Hashtable();

                hash["error"] = ;

                hash["url"] = "请选择文件";

                return Json(hash);

            }

            string dirPath = Server.MapPath(savePath);

            if (!Directory.Exists(dirPath))

            {

                Directory.CreateDirectory(dirPath);

            }

            string fileName = file.FileName;

            string fileExt = Path.GetExtension(fileName).ToLower();

            ArrayList fileTypeList = ArrayList.Adapter(fileTypes.Split(','));

            if (file.InputStream == null || file.InputStream.Length > maxSize)

            {

                hash = new Hashtable();

                hash["error"] = ;

                hash["url"] = "上传文件大小超过限制";

                return Json(hash);

            }

            if (string.IsNullOrEmpty(fileExt) || Array.IndexOf(fileTypes.Split(','), fileExt.Substring().ToLower()) == -)

            {

                hash = new Hashtable();

                hash["error"] = ;

                hash["url"] = "上传文件扩展名是不允许的扩展名";

                return Json(hash);

            }

            string newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt;

            string filePath = dirPath + newFileName;

            file.SaveAs(filePath);

            //图片在服务器上的路径

            string fileUrl = savePath + newFileName;

            hash = new Hashtable();

            hash["error"] = ;

            hash["url"] = fileUrl;

            return Json(hash, "text/html;charset=UTF-8"); ;

        }

PS：

通过KindEditor实现图片上传功能步骤：
 
（1）修改../plugins/image.js文件中fileName类型为file的name
 
 (2) 添加上传处理的URL：
 
 var editor;
     KindEditor.ready(function(K) {
 
         editor = K.create('#myeditor', 
 
        {
             uploadJson : '/uploadImg'
         });
 
  });
 

（3）返回Json的信息：

 
//成功时 { "error" : 0, "url" : "http://www.example.com/path/to/file.ext" }
//失败时 { "error" : 1, "message" : "错误信息" }
 
以下为老版本设置方法（过时）：
------------------------------------------------------------------------------------------------
 
（1）修改../plugins/image.html文件中input类型为file的name
 

（2）编写服务器端图片上传方法，要求返回的结果为JSON格式

 
（3）JSON格式要求为：
 
{"error":0,"message":".....","url":"/img/1111.gif"} 
 
其中当error值为0时表示上传成功，需要指定url值为图片保存后的URL地址，如果error值不为0，则设置message值为错误提示信息
 
（4）Html页面：
 
//编辑器初始化设置
 
KE.show({
    id : 'editor',
    allowUpload : true, //允许上传图片
    imageUploadJson : '/saveImg' //服务端上传图片处理URI
});
 
//这里需要表单
<textarea id="editor" name="content" style="width:700px;height:300px;"></textarea>
 
 
（5）结束，就这么简单
 
注意：别忘了导入plugins/image文件夹，否则图片上传按钮无效。

kindeditor编辑器上传图片的更多相关文章

  1. kindeditor编辑器上传图片失败 错误 405.0解决办法（亲测）

    HTTP 错误 405.0 - Method Not Allowed(省略)editor/php/upload_json.php?dir=image物理路径 http://www.gdgoga.com ...

  2. Django项目开发，XSS攻击，图片防盗链，图片验证码，kindeditor编辑器

    目录 一.Django项目开发 1. 项目开发流程 2. auth模块的补充 (1)django的admin可视化管理页面 (2)将admin可视化管理页面的模型表显示成中文 (3)auth模块的用户 ...

  3. 如何自定义kindeditor编辑器的工具栏items即去除不必要的工具栏或者保留部分工具栏

    kindeditor编辑器的工具栏主要是指编辑器输入框上方的那些可以操作的菜单,默认情况下编辑器是给予了所有的工具栏.针对不同的用户,不同的项目,不同的环境,可能就需要保留部分工具栏.那么我们应该如何 ...

  4. ThinPHP第二十八天(F函数和file_put_contents区别|PHP生成PHP文件,Kindeditor编辑器使用方法)

    1.F(name,data,path)函数和file_put_contents(file,str)区别 F函数直接生成<?php ?>格式的php文件了,将data加入到<?php和 ...

  5. 在MVC3中修改KindEditor实现上传图片到指定文件夹

    KindEditor编辑器默认上传的图片文件夹,是根据系统时间自动生成的,图片是自动上传到这些文件夹里面,无法选择.如果要上传图片到指定文件夹,像相册一样管理图片,则需要扩展KindEditor编辑器 ...

  6. Kindeditor编辑器上传附件，自动获取文件名显示。

    大部分在线编辑器在上传附件之后都是会以路径的形式显示出来很不友好.类似这样..怎么样显示成这样用户上传的原始文件名呢.就是这样.是不是看着很友好. kindeditor编辑器上传文件是已插件的形式调用 ...

  7. kindeditor编辑器和图片上传独立分开的配置细节

    关于kindeditor编辑器上传按钮的异步加载最关键的部署问题,它的上传图片的组件都已经封装得很好了的,只需要监听到页面按钮的点击事件给编辑器对象传递一些对应的初始化参数即可显示图片上传的弹窗实现异 ...

  8. 如何在一个页面添加多个不同的kindeditor编辑器

    kindeditor官方下载地址:http://kindeditor.net/down.php    (入门必看)kindeditor官方文档:http://kindeditor.net/doc.ph ...

  9. kindeditor编辑器里面 filterMode为false时候，允许输入任何代码

    kindeditor编辑器里面 filterMode为false时候,允许输入任何代码

随机推荐

  1. mysql connections

    在使用MySQL数据库的时候,经常会遇到这么一个问题,就是“Can not connect to MySQL server. Too many connections”-mysql 1040错误,这是 ...

  2. [CTSC2010]珠宝商 SAM+后缀树+点分治

    [CTSC2010]珠宝商 不错的题目 看似无法做,n<=5e4,8s,根号算法? 暴力一: n^2,+SAM上找匹配点的right集合sz,失配了直接退出 暴力二: O(m) 统计过lca=x ...

  3. hdu5306 Explosion

    题目链接 题意 有n个房间,每个房间里面有若干把钥匙,每把钥匙可以打开对应的一扇门.如果手中没有钥匙,就要随机轰炸一个房间来打开这个房间.如果有钥匙,就要去打开这些房间.问期望轰炸次数是多少. 思路 ...

  4. C#项目获取当前时间的农历时间

    https://blog.csdn.net/cstester/article/details/7407044 using System.Globalization; class CnCanlendar ...

  5. bash 4

    1)获取字符串长度: str="jwwjww" #str=‘jwwjww’//单引号双引号都一样 echo ${#str} 结果:6 2)提取子字符串 echo ${#str:1: ...

  6. 第三十四节，目标检测之谷歌Object Detection API源码解析

    我们在第三十二节,使用谷歌Object Detection API进行目标检测.训练新的模型(使用VOC 2012数据集)那一节我们介绍了如何使用谷歌Object Detection API进行目标检 ...

  7. macs 学习

    点击 首先andriomianfest主配文件(主要配置文件),来启动主要的activity对象,然后通过该对象调用create方法来加载布局文件xml active通过布局文件的控件生成相应的对象. ...

  8. asp一句话

    <%eval""&("e"&"v"&"a"&"l"&& ...

  9. 2019年 十款Mac上必备的实用软件列表

    2019年 十款Mac上必备的实用软件列表 文章来源:风云社区 (www.scoee.com 两千多款Mac软件下载) 1.Parallels Desktop 如果你还是想在Mac上使用Windows ...

  10. Linux中rpm的使用

    1.安装 rpm -i 需要安装的包文件名 举例如下: rpm -i example.rpm 安装 example.rpm 包: rpm -iv example.rpm 安装 example.rpm ...