前些天发现一些群友对于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