前些天发现一些群友对于KindEditor编辑器上传图片有一些疑问,不知道后台怎么处理上传的图片以及如何添加水印,

这里只对上传单张图片及添加水印做一下基础讲解(大神请快速路过),上传附件以及多张图片的使用方式大同小异,请根据案例自行研究。


下面对KindEditor在Asp.net里的使用方法做一个详细的说明,文章结尾会有附件DEMO下载,

如有不理解请直接下载附件查看,这里只做简单详解抛砖引玉,如果你有更好的方法可以忽略本篇讲解。


第一步:页面加载KindEditor编辑器

<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="Form1" runat="server">
    文章内容:<textarea onmouseover="this.focus();" id="content" class="form-control" rows="25"
        style="max-height: 2222px; max-width: 95%;" placeholder="请上传图片试试看" runat="server"></textarea>
    </form>
    <script src="/kindeditor-4.1.7/kindeditor-all-min.js" type="text/javascript"></script>
    <script type="text/javascript">
        KindEditor.ready(function (K) {
            K.create('#content', {
                resizeType: 1,
                allowPreviewEmoticons: false,
                allowImageUpload: true,
                allowMediaUpload: false,
                allowFlashUpload: false,
                autoHeightMode: true,
                uploadJson: '/Interface/PubInterface.ashx?act=pubinterimg', //上传图片接口
                afterCreate: function () {
                    this.loadPlugin('autoheight');
                },
                items: ['source', '|', 'undo', 'redo', '|', 'preview', 'print', 'code', 'cut', 'copy', 'paste', 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/', 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'flash', 'media', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak', 'anchor', 'link', 'unlink']
            });
        });
    </script>
</body>
</html>

第二步:配置上传图片接口



using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;

namespace KindEditorUploadImg.Interface
{
    /// <summary>
    /// kindeditor上传图片案例
    /// 作者:www.yunjson.com
    /// </summary>
    public class PubInterface : IHttpHandler
    {
        delegate void func(HttpContext context);
        static Dictionary<string, func> services = new Dictionary<string, func>();
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string urlstr = string.Empty;
            string act = context.Request["act"];
            try
            {
                services[act](context);
            }
            catch
            {
                context.Response.Write("{\"error\":1,\"url\":\"\",\"message\":\"请求异常\"}");
                return;
            }
        }
        static PubInterface()
        {
            #region kindeditor上传图片案例
            services.Add("pubinterimg", delegate(HttpContext context)
            {
                HttpPostedFile postedFile = context.Request.Files["imgFile"];//接收图片对象
                try
                {
                    string fileExt = GetFileExt(postedFile.FileName); //文件扩展名,不含“.”
                    int fileSize = postedFile.ContentLength; //获得文件大小,以字节为单位
                    string newFileName = DateTime.Now.Ticks   "."   fileExt; //随机生成新的文件名
                    string upLoadPath = "/UploadEditorImg/"   DateTime.Now.ToString("yyyyMMdd")   "/"; //上传目录相对路径
                    string fullUpLoadPath = context.Server.MapPath(upLoadPath); //上传根目录
                    string newFilePath = upLoadPath   newFileName;
                    //检查文件扩展名是否合法
                    if (fileExt != "png" && fileExt != "jpg" && fileExt != "gif" && fileExt != "jpeg")
                    {
                        context.Response.Write("{\"error\":1,\"url\":\"\",\"message\":\"只允许上传png/jpg/jpeg/gif格式文件\"}");
                        return;
                    }
                    if (fileSize > 5 * 1024 * 1024)
                    {
                        context.Response.Write("{\"error\":1,\"url\":\"\",\"message\":\"上传图片过大,单张图片请勿超过5兆\"}");
                        return;
                    }
                    //检查上传的物理路径是否存在,不存在则创建
                    if (!Directory.Exists(fullUpLoadPath))
                    {
                        Directory.CreateDirectory(fullUpLoadPath);
                    }

                    #region 添加水印
                    byte[] byteData = FileHelper.ConvertStreamToByteBuffer(postedFile.InputStream);
                    byteData = ImgWater.AddImageSignText(byteData, fileExt, "www.yunjson.com", 9, 90, "宋体", 35);
                    //保存文件
                    FileHelper.SaveFile(byteData, fullUpLoadPath   newFileName);
                    #endregion
                    //处理完毕,返回JOSN格式的文件信息
                    string UrlStr = "http://"   context.Request.Url.Authority;//拼接当前端口路径
                    context.Response.Write("{\"error\":0,\"url\":\""   UrlStr   newFilePath   "\",\"message\":\"上传成功,保存后生效\"}");
                    return;
                }
                catch
                {
                    context.Response.Write("{\"error\":1,\"url\":\"\",\"message\":\"上传过程中发生意外错误\"}");
                    return;
                }
            });
            #endregion


        }

        /// <summary>
        /// 返回文件扩展名,不含“.”
        /// </summary>
        /// <param name="_filepath">文件全名称</param>
        /// <returns>string</returns>
        public static string GetFileExt(string _filepath)
        {
            if (string.IsNullOrEmpty(_filepath))
            {
                return "";
            }
            if (_filepath.LastIndexOf(".") > 0)
            {
                return _filepath.Substring(_filepath.LastIndexOf(".")   1); //文件扩展名,不含“.”
            }
            return "";
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}
第三步:前面两步已经把主要代码写出来了,请自行研究,下面来看下页面演示



第四步:请下载DEMO源码自行研究,请注意:源码中用到FileHelper.cs和ImgWater.cs两个Helper帮助类。


点击下载“Asp.net实现KindEditor编辑器上传单张图片添加水印”源码DEMO 


注意:KindEditor官方对于在Asp.net、Java、PHP、ASP等语言中的具体用法给出了详细的讲解,点击下载官方源码DEMO