使用的是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. centos7 下解决mysql-server找不到安装包问题

    第一步:安装从网上下载文件的wget命令 [root@master ~]# yum -y install wget 第二步:下载mysql的repo源 [root@master ~]# wget ht ...

  2. webpack入门（七） API in LOADERS

    介绍 loaders允许你用require() 预处理文件(preprocess files)或者加载他们,在其他的构建工具中,loaders就是一种像“任务(tasks)”的东西.他提供了一种处理前 ...

  3. 10元买啤酒问题Java解法

    10元去买啤酒,2元一瓶.每两个瓶可以换一瓶啤酒,每四个瓶盖可以换一瓶啤酒.最多买几瓶? public class Java { public static void main(String[] ar ...

  4. MyQR库自动为网址生成二维码

    首先安装MyQR库: pip install MyQR #导包 from MyQR import myqr #生成二维码 words=你要为那个网址生成二维码 save_name=保存后的图片名 pi ...

  5. [SDOI2011]计算器（exgcd&BSGS）

    k=1:裸的快速幂k=2:xy=z+kp,直接exgcd,这个可以不用解释了,不懂的同学可以看代码 k=3:裸的BSGS 重点是k=3(BSGS学习)ax=b(mod p)求解这个同余方程只能求gcd ...

  6. 第二十三篇-ubuntu18.04怎么下载播放器以及如何设置默认播放器

    下载播放器 安装命令:sudo apt-get install smplayer再安装解码器: 安装win32codecs包 如果是intel的CPU 代码: sudo apt-get install ...

  7. 神经网络中w,b参数的作用（为何需要偏置b的解释）

    http://blog.csdn.net/xwd18280820053/article/details/70681750 可视图讲解神经元w,b参数的作用 在我们接触神经网络过程中,很容易看到就是这样 ...

  8. 斯坦福大学公开课机器学习： machine learning system design | prioritizing what to work on : spam classification example（设计复杂机器学习系统的主要问题及构建复杂的机器学习系统的建议）

    当我们在进行机器学习时着重要考虑什么问题.以垃圾邮件分类为例子.假如你想建立一个垃圾邮件分类器,看这些垃圾邮件与非垃圾邮件的例子.左边这封邮件想向你推销东西.注意这封垃圾邮件有意的拼错一些单词,就像M ...

  9. HTTP协议相关原理

    HTTP 的全称是 Hyper Text Transfer Protocol,中文名叫做超文本传输协议 HTTP协议是用于从网络传输超文本数据到本地浏览器的传送协议,它能保证传送高效而准确地传送超文本 ...

  10. （栈）leetcode856 Score of Parentheses

    Given a balanced parentheses string S, compute the score of the string based on the following rule: ...