使用的是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. 【POJ2676】sudoku 搜索

    按照每一行每一列去填数,当填到每一行的第9列时,开始填下一行. 代码如下: #include <cstdio> #include <algorithm> #include &l ...

  2. 树结构关系的数据导出为excel

    该文针对的是关于树结构的数据的导出,每一个节点都可以创建不定数的子节点,在选择好某个节点进行导出 时,会把该节点以及子节点的数据都导出来.导出后的excel的格式大概如下图的形式,这个是一个比较理想 ...

  3. MFC读写配置ini文件

    https://blog.csdn.net/naibozhuan3744/article/details/78783446 https://blog.csdn.net/rayborn1105/arti ...

  4. django（六）之ORM数据库操作

    https://www.cnblogs.com/haiyan123/p/7732190.html 一.ORM介绍 ORM——object relation mapping 映射关系: 表名 ----- ...

  5. Day28--Python--网络通信协议 tcp与udp下的socket

    昨日内容回顾: 1. CS架构 服务端客户端架构 软件CS架构: 京东,淘宝,QQ,微信,暴风影音,快播 硬件CS架构: 打印机 服务端: 提供服务的 客户端: 享受服务的 BS架构: 浏览器和服务端 ...

  6. ActiveMQ与RabbitMQ的区别

    1. ActiveMQ/ApolloMQ 优点:老牌的消息队列,使用Java语言编写.对JMS支持最好,采用多线程并发,资源消耗比较大.如果你的主语言是Java,可以重点考虑. 缺点:由于历史悠久,历 ...

  7. （线性dp，LCS） POJ 1458 Common Subsequence

    Common Subsequence Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 65333   Accepted: 27 ...

  8. node(基础)_node.js中的http服务以及模板引擎的渲染

    一.前言 本节的内容主要涉及: 1.node.js中http服务 2.node.js中fs服务 3.node.js中模板引擎的渲染 4.利用上面几点模拟apache服务器 二.知识 1.node.js ...

  9. 序列化serialize与反序列化unserialize

    有利于存储和传递value(除了resource类型外),却不会丢失其原有类型和结构. serialize序列化时会调用魔术方法__sleep(); unserialize反序列化时会调用魔术方法__ ...

  10. 1.Django学习

    ##Django学习 一.创建项目 django-admin startproject myblog 二.项目目录 ##启动项目:manage.py runserver 如果创建应用需要将名称写在这里 ...