使用的是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. thinkphp5 如何监听sql？

    第一步 在database配置文件中开启 // 是否需要进行SQL性能分析'sql_explain' => true, 第二步 在需要测试的sql前,使用以下demo Db::listen(fu ...

  2. java实现sftp客户端上传文件以及文件夹的功能

    1.依赖的jar文件 jsch-0.1.53.jar 2.登录方式有密码登录,和密匙登录 代码: 主函数: import java.util.Properties; import com.cloudp ...

  3. 洛谷T31039 九尾狐吃棉花糖

    小伙伴出的题. 一眼看出是状压DP裸题.回忆poj2288 islands and bridges,然后就很好写了. 啪啪啪打了个状压DP出来(晚上寝室写的,其实是记忆化搜索),发现sum总是INF ...

  4. 【洛谷P4145】花神游历各国

    题目大意:给定一个长度为 N 的序列,支持区间开根,区间求和. 题解:对于区间开根操作,可以发现任何一个位置的值开根至多 6 次就会变成 1.因此即使是整个区间开根,暴力修改6次后,所有的点的权值均小 ...

  5. 【CSS 技能提升】 :before和:after的使用

    前几天的晚上较全面的去看了下css的一些文档和资料,大部分的样式运用都没什么大问题了,只是有些许较陌生,但是也知道他们的存在和实现的是什么样式.今天主要想在这篇学习笔记中写的也不多,主要是针对:bef ...

  6. sublime中编辑服务器上的文件

    背景:公司项目需要进行构建编译,在服务器上速度比较快,所以需要将sublime和linux中的文件相关联. 参考资料:http://zyan.cc/samba_linux_windows/ 主要有两步 ...

  7. zlib库交叉编译

    zlib-1.2.11 开发板:arm9 交叉编译器arm-fsl-linux-gnueabihf-gcc 编译方式: ./configure -h可以发现zlib并没有提供CC配置,所以 (1)ex ...

  8. hdu 2476"String painter"(区间DP)

    传送门 https://www.cnblogs.com/violet-acmer/p/9852294.html 题意: 给定字符串A,B,每次操作可以将字符串A中区间[ i , j ]的字符变为ch, ...

  9. 跨域技术（JSONP与CROS）

    JSONP 我们发现,Web页面上调用js文件时不受是否跨域的影响,凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>.<img>.&l ...

  10. node.js(基础四)_express基础

    一.前言                                                           本次内容主要包括: 1.express的基本用法 2.express中的静 ...