kindeditor-4.1.10 结合 Asp.Net MVC 添加图片功能
KindEditor是一套开源的HTML可视化编辑器，现在我要结合Asp.Net MVC4 上传图片功能，做相应的配置和修改，
其实网上也有人写过类似的文章了，我写出来是以防以后使用的时候出现这样的问题，所以收集起来做参考之用，
如果有人遇到这样的问题，可以和我一起交流，qq号在我博客上已经贴出来了。
下面就开始贴出我的源代码：
js:
var keditor;
var koption = {
allowFileManager: true, //是否可以浏览上传文件
allowUpload: true, //是否可以上传
fileManagerJson: '/KindEditor/ProcessRequest', //浏览文件方法
uploadJson: '/KindEditor/UploadImage'//上传文件方法(注意这两个路径)
}; KindEditor.ready(function (k) {
keditor = k.create('#content-js', koption);
prettyPrint();
}); function btn_submit() {
var lables = '';
var title = $("#txt_title").val();
if (title.length == 0 || keditor.isEmpty()) {
alert("标题或内容为空！");
return false;
}
$("input[name=lable]:checked").each(function () {
lables += $(this).val() + ',';
}); ;
zwobj.url = "/Manage/AddArticle";
zwobj.data = { title: title,
content: encodeURI(keditor.html()),
lables: lables.substr(0, lables.length - 1)
};
ajaxData();
return true;
}
aspx:
<%@ Page Language="C#" EnableEventValidation="false" ValidateRequest="false" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<%@ Import Namespace="MyMvc4Project.Dal.Views" %>
<!DOCTYPE html>
<html>
<head runat="server">
<meta name="viewport" content="width=device-width" />
<title>NewArticle</title>
<link href="../../Scripts/kindeditor-4.1.10/themes/default/default.css" rel="stylesheet"
type="text/css" />
<link href="../../Scripts/kindeditor-4.1.10/plugins/code/prettify.css" rel="stylesheet"
type="text/css" />
<link href="../../Scripts/Lib/Manage/Manage.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery/jquery-1.8.3.js" type="text/javascript"></script>
<script src="../../Scripts/jquery/jquery.form.js" type="text/javascript"></script>
<script src="../../Scripts/kindeditor-4.1.10/kindeditor-all-min.js" type="text/javascript"></script>
<script src="../../Scripts/kindeditor-4.1.10/lang/zh_CN.js" type="text/javascript"></script>
<script src="../../Scripts/kindeditor-4.1.10/plugins/code/code.js" type="text/javascript"></script>
<script src="../../Scripts/kindeditor-4.1.10/plugins/code/prettify.js" type="text/javascript"></script>
<script src="../../Scripts/zwjs.js" type="text/javascript"></script>
<script src="../../Scripts/Lib/Manage/NewArticle.js" type="text/javascript"></script>
</head>
<body>
<div class="kedit">
<form id="form-article" name="form-article" method="POST">
<p>
标题：</p>
<input type="text" id="txt_title" name="title" />
<p>
正文：</p>
<textarea id="content-js" name="content"></textarea>
<p>
<% var lable = ViewData["lable"] as IList<LableView>;
if (lable != null && lable.Count != 0)
{
%>
<p>标签：</p>
<%
foreach (var view in lable)
{%>
<input class="chk-lable" name="lable" type="checkbox" value="<%= view.Name %>" ><%= view.Name %></input>
<%} %>
<% }
else
{ %>
<p>无标签</p>
<% } %>
</p>
<p>
<input id="btn-submit" type="submit" value="发布" onclick="btn_submit()" />
<input id="btn-cancel" type="button" value="取消" /></p>
</form>
</div>
</body>
</html>
XXXController.cs
using System;
using System.Collections;
using System.Collections.Generic;
using System.Globalization;
using System.IO;
using System.Linq;
using System.Text;
using System.Text.RegularExpressions;
using System.Web;
using NHibernate;
using System.Web.Mvc;
using MyMvc4Project.Infrastructure.Helpers;
using MyMvc4Project.Dal.Implementation;
using MyMvc4Project.Service; namespace MyMvc4Project.Controllers
{
public class KindEditorController : Controller
{
[HttpPost]
public ActionResult UploadImage()
{
string savePath = "/UploadImages/";
string saveUrl = "/UploadImages/";
string fileTypes = "gif,jpg,jpeg,png,bmp";
int maxSize = 1000000; Hashtable hash = new Hashtable(); HttpPostedFile file = System.Web.HttpContext.Current.Request.Files["imgFile"];
if (file == null)
{
hash = new Hashtable();
hash["error"] = 1;
hash["message"] = "请选择文件";
return Json(hash, "text/html;charset=UTF-8");
} string dirPath = System.Web.HttpContext.Current.Server.MapPath(savePath);
if (!Directory.Exists(dirPath))
{
hash = new Hashtable();
hash["error"] = 1;
hash["message"] = "上传目录不存在";
return Json(hash, "text/html;charset=UTF-8");
} 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"] = 1;
hash["message"] = "上传文件大小超过限制";
return Json(hash, "text/html;charset=UTF-8");
} if (string.IsNullOrEmpty(fileExt) || Array.IndexOf(fileTypes.Split(','), fileExt.Substring(1).ToLower()) == -1)
{
hash = new Hashtable();
hash["error"] = 1;
hash["message"] = "上传文件扩展名是不允许的扩展名";
return Json(hash, "text/html;charset=UTF-8");
} string newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt;
string filePath = dirPath + newFileName;
file.SaveAs(filePath);
string fileUrl = saveUrl + newFileName; hash = new Hashtable();
hash["error"] = 0;
hash["url"] = fileUrl; return Json(hash, "text/html;charset=UTF-8");
} public ActionResult ProcessRequest()
{
//String aspxUrl = context.Request.Path.Substring(0, context.Request.Path.LastIndexOf("/") + 1); //根目录路径，相对路径
String rootPath = "/UploadImages/";
//根目录URL，可以指定绝对路径，
String rootUrl = "/UploadImages/";
//图片扩展名
String fileTypes = "gif,jpg,jpeg,png,bmp"; String currentPath = "";
String currentUrl = "";
String currentDirPath = "";
String moveupDirPath = ""; //根据path参数，设置各路径和URL
String path = System.Web.HttpContext.Current.Request.QueryString["path"];
path = String.IsNullOrEmpty(path) ? "" : path;
if (path == "")
{
currentPath = System.Web.HttpContext.Current.Server.MapPath(rootPath);
currentUrl = rootUrl;
currentDirPath = "";
moveupDirPath = "";
}
else
{
currentPath = System.Web.HttpContext.Current.Server.MapPath(rootPath) + path;
currentUrl = rootUrl + path;
currentDirPath = path;
moveupDirPath = Regex.Replace(currentDirPath, @"(.*?)[^\/]+\/$", "$1");
} //排序形式，name or size or type
String order = System.Web.HttpContext.Current.Request.QueryString["order"];
order = String.IsNullOrEmpty(order) ? "" : order.ToLower(); //不允许使用..移动到上一级目录
if (Regex.IsMatch(path, @"\.\."))
{
System.Web.HttpContext.Current.Response.Write("Access is not allowed.");
System.Web.HttpContext.Current.Response.End();
}
//最后一个字符不是/
if (path != "" && !path.EndsWith("/"))
{
System.Web.HttpContext.Current.Response.Write("Parameter is not valid.");
System.Web.HttpContext.Current.Response.End();
}
//目录不存在或不是目录
if (!Directory.Exists(currentPath))
{
System.Web.HttpContext.Current.Response.Write("Directory does not exist.");
System.Web.HttpContext.Current.Response.End();
} //遍历目录取得文件信息
string[] dirList = Directory.GetDirectories(currentPath);
string[] fileList = Directory.GetFiles(currentPath); switch (order)
{
case "size":
Array.Sort(dirList, new NameSorter());
Array.Sort(fileList, new SizeSorter());
break;
case "type":
Array.Sort(dirList, new NameSorter());
Array.Sort(fileList, new TypeSorter());
break;
case "name":
default:
Array.Sort(dirList, new NameSorter());
Array.Sort(fileList, new NameSorter());
break;
} Hashtable result = new Hashtable();
result["moveup_dir_path"] = moveupDirPath;
result["current_dir_path"] = currentDirPath;
result["current_url"] = currentUrl;
result["total_count"] = dirList.Length + fileList.Length;
List<Hashtable> dirFileList = new List<Hashtable>();
result["file_list"] = dirFileList;
for (int i = 0; i < dirList.Length; i++)
{
DirectoryInfo dir = new DirectoryInfo(dirList[i]);
Hashtable hash = new Hashtable();
hash["is_dir"] = true;
hash["has_file"] = (dir.GetFileSystemInfos().Length > 0);
hash["filesize"] = 0;
hash["is_photo"] = false;
hash["filetype"] = "";
hash["filename"] = dir.Name;
hash["datetime"] = dir.LastWriteTime.ToString("yyyy-MM-dd HH:mm:ss");
dirFileList.Add(hash);
}
for (int i = 0; i < fileList.Length; i++)
{
FileInfo file = new FileInfo(fileList[i]);
Hashtable hash = new Hashtable();
hash["is_dir"] = false;
hash["has_file"] = false;
hash["filesize"] = file.Length;
hash["is_photo"] = (Array.IndexOf(fileTypes.Split(','), file.Extension.Substring(1).ToLower()) >= 0);
hash["filetype"] = file.Extension.Substring(1);
hash["filename"] = file.Name;
hash["datetime"] = file.LastWriteTime.ToString("yyyy-MM-dd HH:mm:ss");
dirFileList.Add(hash);
}
//Response.AddHeader("Content-Type", "application/json; charset=UTF-8");
//context.Response.Write(JsonMapper.ToJson(result));
//context.Response.End();
return Json(result, "text/html;charset=UTF-8", JsonRequestBehavior.AllowGet);
} public class NameSorter : IComparer
{
public int Compare(object x, object y)
{
if (x == null && y == null)
{
return 0;
}
if (x == null)
{
return -1;
}
if (y == null)
{
return 1;
}
FileInfo xInfo = new FileInfo(x.ToString());
FileInfo yInfo = new FileInfo(y.ToString()); return xInfo.FullName.CompareTo(yInfo.FullName);
}
} public class SizeSorter : IComparer
{
public int Compare(object x, object y)
{
if (x == null && y == null)
{
return 0;
}
if (x == null)
{
return -1;
}
if (y == null)
{
return 1;
}
FileInfo xInfo = new FileInfo(x.ToString());
FileInfo yInfo = new FileInfo(y.ToString()); return xInfo.Length.CompareTo(yInfo.Length);
}
} public class TypeSorter : IComparer
{
public int Compare(object x, object y)
{
if (x == null && y == null)
{
return 0;
}
if (x == null)
{
return -1;
}
if (y == null)
{
return 1;
}
FileInfo xInfo = new FileInfo(x.ToString());
FileInfo yInfo = new FileInfo(y.ToString()); return xInfo.Extension.CompareTo(yInfo.Extension);
}
}
}
}
总结：
要注意
var koption = {
allowFileManager: true, //是否可以浏览上传文件
allowUpload: true, //是否可以上传
fileManagerJson: '/KindEditor/ProcessRequest', //浏览文件方法
uploadJson: '/KindEditor/UploadImage'//上传文件方法(注意这两个路径)
};
的配置，尤其是fileManagerJson和uploadJson的地址写法，最后就是关于
hash = new Hashtable();
hash["success"] = true;
hash["url"] = fileUrl;
hash["msg"] = "上传成功";
return Json(hash, "text/html;charset=UTF-8");
hashtable 返回时的参数写法
如果是失败的话，当然要返回hash["error"]=1，这些你都要注意。
kindeditor-4.1.10 结合 Asp.Net MVC 添加图片功能的更多相关文章
- Asp.net MVC 实现图片上传剪切
使用技术:Asp.net MVC与jquery.uploadify,Jcrop 首先上页面 01 <strong><!DOCTYPE html> 02 <html> ...
- asp.net MVC 网站图片防盗链的几种方法
目录 1. 通过 URL Rewrite Module 组件 2. 通过 nginx 图片防盗链 3.自定义 HttpHandler 处理 4. 通过 MVC 自定义路由规则防盗链 5. 通过 MVC ...
- 10、ASP.NET MVC入门到精通——Model(模型)和验证
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 模型就是处理业务,想要保存.创建.更新.删除的对象. 注解(通过特性实现) DisplayName Required StringLengt ...
- ASP.NET MVC 3:缓存功能的设计问题
今天这一篇文章我来谈一谈在MVC 3项目中的缓存功能,以及针对缓存的一些设计上的考量,给大家参考参考. 为什么需要讨论缓存?缓存是一个中大型系统所必须考虑的问题.为了避免每次请求都去访问后台的资源(例 ...
- 转 ---- Asp.net mvc项目分页功能
1.定义一个分页用的Page<T>类 1 /* 使用示例: 2 var pager = new Pager<Article>( 3 this.ControllerContext ...
- Asp.net mvc项目分页功能
1.定义一个分页用的Page<T>类 /* 使用示例: var pager = new Pager<Article>( this.ControllerContext, //上下 ...
- asp.net mvc添加多条数据到数据库
mvc的视图太强大了,个人刚刚接触.(初级菜鸟,懂的不多,往大神们指点)需求是,客户点击添加按钮弹出一个框选择产品后直接添加到表单中,在表单可以自己更改产品的数量,以及一些信息.mvc表单提交的时候只 ...
- asp.net MVC添加HtmlHelper扩展示例和用法
一.先创建一个HtmlHelper的扩展类,代码: using System; using System.Collections.Generic; using System.Linq; using S ...
- asp.net MVC 统计在线人数功能实现
今天开发一个设计一个统计在线人数的统计.实现方式是在MVC 中,用户次执行一个Action请求完成后,向数据表中插入一条用户心跳记录,统计在线人数则是根据该记录,30分钟内有记录的用户则为在线状态. ...
随机推荐
- IIS设置允许下载.exe文件解决方法(转)
最近很多客户使用IIS服务器,然后提示返现宝下载无法找到等无法下载的问题. 返现宝是.exe安装文件,部分服务器或主机可能无法下载. 第一.如果是自己服务器或VPS请按如下设置: 1.设置MIME,让 ...
- JMS - 事务性消息
JMS 事务遵从发送操作与接收操作相互分离的约定.下图显示的是一个事务性发送,其中一组消息要么能够保证全部到达消息服务器,要么连一条消息也不能保证到达消息服务器.从发送者的角度来看,JMS 提供者为这 ...
- xml使用系统整理
1. 认识xml 可扩展标记语言,一种用于标记电子文档使其具有结果性的标记语言,它可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言. 2. 和超文本标记语言区别 2.1 ...
- asp.net中C#获取字符串中汉字的个数实例
符串可以包括数字,字母,汉字或者其他的字符.使用Char类型的IsDigit静态方法可以判断字符串中的字符是否为数字,使用Char类型中的 IsLetter静态方法可以判断字符串中是否为字母.我们来实 ...
- MD5和Base64介绍与应用
MD5:概念:MD5是一种不可逆的消息摘要算法.为计算机安全领域广泛使⽤的一种散列函数, 用以提供消息的完整性保护.效果:把一个任意长度的字节串变换成⼀定⻓度的⼗六进制数字串. 目的是让⼤容量信息在⽤ ...
- Swift静态方法
与静态属性类似,Swift中还定义了静态方法,也称为类型方法,所谓“类型”是指枚举.结构体和类.静态方法定义的方法也是与静态属性类似的,枚举和结构体的静态方法使用的关键字是static,类的静态方法使 ...
- OpenGL7-3快速绘制（索引方式)
代码下载#include "CELLWinApp.hpp"#include <gl/GLU.h>#include <assert.h>#include &l ...
- 【leetcode】10.Regular Expression Matching
题目描述: Implement regular expression matching with support for '.' and '*'. '.' Matches any single cha ...
- 百练_2945 拦截导弹(DP)
描述 某国为了防御敌国的导弹袭击,开发出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能高于前一发的高度.某天,雷达捕捉到敌国的导弹来袭 ...
- 【转】Session与Cookie的比较
最近发现写博客也是提高学习效率的有效途径之一.好记性不如烂笔头,归纳总结时,你会发现总有一些东西你认为很熟了,它却在细微处讽刺你的错误.我学习COOKIE与SESSION时,几乎把社区所有相关的帖子都 ...