使用的是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. java 连接数组

    一,使用Apache Commons的ArrayUtils Apache Commons类库有很多,几乎大多数的开源框架都依赖于它,Commons中的工具会节省你大部分时间,它包含一些常用的静态方法和 ...

  2. 洛谷P1880 石子合并

    经典水题....... 断环为链长度乘二,求前缀和区间DP. #include <cstdio> #include <cstring> #include <algorit ...

  3. javascript学习一、js的初步了解

    1.javascript的简介: *javascript 是一种基于对象和事件驱动的语言,主要应用于客户端. -- 基于对象:  ** 提供了很多对象,可以直接使用. --事件驱动: ** html做 ...

  4. ElasticSearch6.3.2------查询

    进入Kibana的控制台:http://localhost:5601/app/kibana#/dev_tools/ 先放一些测试数据进去,不想一条一条,就用bulk 注意格式 正确格式: 解释:ES期 ...

  5. puppeteer端对端测试demo

    1. 下载pupperteer npm i puppeteer 2. 启动一个本地服务 localhost 3. 开启测试 const puppeteer = require('puppeteer') ...

  6. JAVA核心技术I---JAVA基础知识（单例模式和final关键字）

    一:单例模式 C++设计模式中提及,不再赘述设计模式---对象性能模式之单例模式(Singleton) public class single{ static single Instance=new ...

  7. struct sock注释

    针对 struct sock 的一些注释: struct sock { /* Socket demultiplex comparisons on incoming packets. */ __u32  ...

  8. Mac下显示网页全屏快捷键

    control+command+F mac下谷歌浏览器全屏时隐藏头部:(隐藏标签页和地址栏) command+shift+B

  9. Sql Server时间格式化笔记

    Select CONVERT(varchar(100), GETDATE(), 0): 05 16 2006 10:57AMSelect CONVERT(varchar(100), GETDATE() ...

  10. ubuntu 14.04中安装 ruby on rails 环境

    环境:在win7 上Vmware虚拟机环境中安装的ubuntu 14.04 1. bundle install 时,报json错误可以看出是在安装nokogiri时遇到了问题,此时执行 sudo ap ...