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