kindeditor是一个非常好用的富文本编辑器，它的简单使用我就不再介绍了。 在这里我着重介绍一些使用kindeditor修改图片上传路径并通过webapi上传图片到图片服务器的方案。
因为我使用的开发语言是C#&ASP.NET MVC。所以首先需要在项目中引用LitJSON.dll，如下图：
我们修改上传文件：upload_json.ashx
<%@ WebHandler Language="C#" Class="Upload" %>
/**
* KindEditor ASP.NET
*
* 本ASP.NET程序是演示程序，建议不要直接在实际项目中使用。
* 如果您确定直接使用本程序，使用之前请仔细确认相关安全设置。
*
*/
using System;
using System.Collections;
using System.Web;
using System.IO;
using System.Globalization;
using LitJson;
public class Upload : IHttpHandler
{
private HttpContext context;
public void ProcessRequest(HttpContext context)
{
//定义允许上传的文件扩展名
Hashtable extTable = new Hashtable();
extTable.Add("image", "gif,jpg,jpeg,png,bmp");
extTable.Add("flash", "swf,flv");
extTable.Add("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");
extTable.Add("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");
//最大文件大小
;
this.context = context;
HttpPostedFile imgFile = context.Request.Files["imgFile"];
if (imgFile == null)
{
showError("请选择文件。");
}
//文件类型
String dirName = context.Request.QueryString["dir"];
if (String.IsNullOrEmpty(dirName))
{
dirName = "image";
}
if (!extTable.ContainsKey(dirName))
{
showError("目录名不正确。");
}
String fileName = imgFile.FileName;
String fileExt = Path.GetExtension(fileName).ToLower();
if (imgFile.InputStream == null || imgFile.InputStream.Length > maxSize)
{
showError("上传文件大小超过限制。");
}
).ToLower()) == -)
{
showError("上传文件扩展名是不允许的扩展名。\n只允许" + ((String)extTable[dirName]) + "格式。");
}
var saveDir = context.Request["saveDir"];
string saveDirStr = null;
if (saveDir == null)
{
saveDirStr = "tmp";
}
else
{
saveDirStr = saveDir.ToString();
}
//是否分布式上传
bool isDFS = false;
var dfs = context.Request["dfs"];
")
{
isDFS = true;
}
Hashtable hash = new Hashtable();
if (isDFS)
{
var imageUrl = Cloud.Utility.ConfigHelper.Images_SITE_URL;
var client = new RestSharp.RestClient(imageUrl);//TODO api基路径
var request = new RestSharp.RestRequest("file/upload", RestSharp.Method.POST);
request.AlwaysMultipartFormData = true;
request.AddHeader("dir", dirName + "/" + saveDirStr);
request.AddHeader("imageUrl", imageUrl);
request.AddFile("file", Cloud.Utility.StreamHelper.ConvertToBytes(imgFile.InputStream), context.Server.HtmlEncode(imgFile.FileName));
var posttask = client.ExecutePostTaskAsync(request);
if (posttask.Result.StatusCode == System.Net.HttpStatusCode.OK)
{
var url = posttask.Result.Content.Trim(new char[] { '[', ']', '"' });
hash["url"] = url;
}
else
{
showError("分布式上传失败");
}
}
else
{
//文件保存目录
string savePath = "/upload/kindeditor/" + dirName + "/" + saveDirStr;
String dirPath = context.Server.MapPath(savePath);
if (!Directory.Exists(dirPath))
{
Directory.CreateDirectory(dirPath);
}
String newFileName = DateTime.Now.ToString("_yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt;
String filePath = dirPath + "/" + newFileName;
imgFile.SaveAs(filePath);
hash["url"] = savePath + "/" + newFileName;
}
hash[;
context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8");
context.Response.Write(JsonMapper.ToJson(hash));
context.Response.End();
}
private void showError(string message)
{
Hashtable hash = new Hashtable();
hash[;
hash["message"] = message;
context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8");
context.Response.Write(JsonMapper.ToJson(hash));
context.Response.End();
}
public bool IsReusable
{
get
{
return true;
}
}
}
全部代码
客户端传过来一个文件保存目录的参数：saveDir
var saveDir = context.Request["saveDir"];
string saveDirStr = null;
if (saveDir == null)
{
saveDirStr = "tmp";
}
else
{
saveDirStr = saveDir.ToString();
}
客户端传过来一个是否上传文件到图片服务器的参数：dfs，如果dfs=1代表上传到图片服务器，否则上传到本地
//是否分布式上传
bool isDFS = false;
var dfs = context.Request["dfs"];
")
{
isDFS = true;
}
上传文件的核心代码：其中使用到了一个开源的上传组件RestSharp
Hashtable hash = new Hashtable();
if (isDFS)
{
var imageUrl = Cloud.Utility.ConfigHelper.Images_SITE_URL;
var client = new RestSharp.RestClient(imageUrl);//TODO api基路径
var request = new RestSharp.RestRequest("file/upload", RestSharp.Method.POST);
request.AlwaysMultipartFormData = true;
request.AddHeader("dir", dirName + "/" + saveDirStr);
request.AddHeader("imageUrl", imageUrl);
request.AddFile("file", Cloud.Utility.StreamHelper.ConvertToBytes(imgFile.InputStream), context.Server.HtmlEncode(imgFile.FileName));
var posttask = client.ExecutePostTaskAsync(request);
if (posttask.Result.StatusCode == System.Net.HttpStatusCode.OK)
{
var url = posttask.Result.Content.Trim(new char[] { '[', ']', '"' });
hash["url"] = url;
}
else
{
showError("分布式上传失败");
}
}
else
{
//文件保存目录
string savePath = "/upload/kindeditor/" + dirName + "/" + saveDirStr;
String dirPath = context.Server.MapPath(savePath);
if (!Directory.Exists(dirPath))
{
Directory.CreateDirectory(dirPath);
}
String newFileName = DateTime.Now.ToString("_yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt;
String filePath = dirPath + "/" + newFileName;
imgFile.SaveAs(filePath);
hash["url"] = savePath + "/" + newFileName;
}
WebApi文件上传方法如下：
[Route("file/upload")]
[HttpPost]
public async Task<HttpResponseMessage> PostFormData()
{
// Check if the request contains multipart/form-data.
if (!Request.Content.IsMimeMultipartContent())
{
throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
}
var dir = Request.Headers.GetValues("dir").First();
var imageUrl = Request.Headers.GetValues("imageUrl").First();
string root = System.Web.HttpContext.Current.Server.MapPath(Path.Combine("~/images/", dir));
if (System.IO.Directory.Exists(root) == false)
{
System.IO.Directory.CreateDirectory(root);
}
var provider = new MultipartFormDataStreamProvider(root);
provider = new RenamingMultipartFormDataStreamProvider(root);//重命名写法
await Request.Content.ReadAsMultipartAsync(provider);
var urlList = new List<string>();
var url = "";
foreach (MultipartFileData file in provider.FileData)
{
string path = file.LocalFileName;
var start = path.IndexOf("\\images");
path = path.Substring(start);
var mainURL = imageUrl;// ConfigurationManager.AppSettings["MainImageURL"];
url = mainURL + path.Replace("\\", "/");
urlList.Add(url);
//return Request.CreateResponse(HttpStatusCode.OK, url);
}
return Request.CreateResponse(HttpStatusCode.OK, urlList);
}
其中文件重命名方法为：
/// <summary>
/// 文件上传并重命名
/// </summary>
public class RenamingMultipartFormDataStreamProvider : MultipartFormDataStreamProvider
{
public string Root { get; set; }
public RenamingMultipartFormDataStreamProvider(string root)
: base(root)
{
Root = root;
}
public override string GetLocalFileName(HttpContentHeaders headers)
{
string filePath = headers.ContentDisposition.FileName;
// Multipart requests with the file name seem to always include quotes.
if (filePath.StartsWith(@"""") && filePath.EndsWith(@""""))
filePath = filePath.Substring(, filePath.Length - );
return Path.GetFileNameWithoutExtension(filePath)+ DateTime.Now.ToString("_yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + Path.GetExtension(filePath).ToLower();
return filePath;
}
}
mvc views文件kindeditor的配置如下：
KindEditor.ready(function (K) {
window.NewsContent = K.create("#Content", {
cssPath: '/Content/kindeditor-4.1.10/plugins/code/prettify.css',
uploadJson: '/Content/kindeditor-4.1.10/asp.net/upload_json.ashx?saveDir=news_content&dfs=0',
fileManagerJson: '/Content/kindeditor-4.1.10/asp.net/file_manager_json.ashx',
allowFileManager: true,
afterCreate: function () {
this.sync();
},
afterBlur: function () {
this.sync();
}
});
$(".ke-container").addClass("form-control");
});
主要配置的是UploadJson参数：saveDir代表保存的目录，dfs代表是否上传到图片服务器。