使用的是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 = 1000000;
Hashtable hash = new Hashtable();
HttpPostedFileBase file = Request.Files["imgFile"];
if (file == null)
{
hash = new Hashtable();
hash["error"] = 0;
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"] = 0;
hash["url"] = "上传文件大小超过限制";
return Json(hash);
}
if (string.IsNullOrEmpty(fileExt) || Array.IndexOf(fileTypes.Split(‘,‘), fileExt.Substring(1).ToLower()) == -1)
{
hash = new Hashtable();
hash["error"] = 0;
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"] = 0;
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文件夹，否则图片上传按钮无效。