【HTML5+MVC4】xhEditor网页编辑器图片上传
准备工作:
创建一个MVC项目中,添加好xhEditor插件
相关用法:http://www.cnblogs.com/xcsn/p/4701497.html
注意事项:xhEditor分为v1.1.14和v1.2.2两个版本
如果用v1.1.14,jq版本<1.8,如果使用,请下载http://jquery.com/download/的 jQuery Migrate Plugin,即可支持
1.定义模板RichText.cshtml
文件路径:Views/Shared/EditorTemplates/
<textarea id="@ViewData.ModelMetadata.PropertyName" name="@ViewData.ModelMetadata.PropertyName" rows="" cols="" style="width: 96%">@Model</textarea>
<script type="text/javascript">
$(document).ready(function () {
$('#@ViewData.ModelMetadata.PropertyName').xheditor({ upMultiple: , upImgUrl: '@Url.Content("~/Images/XhUpload")',upImgExt: 'jpg,jpeg,gif,png' });
});
</script>
2.编辑器图片上传的控制器方法,注意要修改配置文件信息,包含图片上传路径和域名
#region XhEditor网页编辑器图片上传【HTML5+】
/// <summary>
/// XhEditor网页编辑器图片上传【HTML5+】
/// </summary>
/// <param name="fileData"></param>
/// <returns></returns>
[HttpPost]
public ActionResult XhUpload(HttpPostedFileBase fileData)
{
Response.Charset = "UTF-8"; // 初始化一大堆变量
//string inputname = "filedata";//表单文件域name
string xheditorUpload = WebConfigurationManager.AppSettings["XheditorUpload"]; //配置文件: 上传文件保存路径,结尾不要带/
var url = Request.Url.ToString();
string imagesDomain = url.Substring(0,url.NthIndexOf('/',3));
//string imagesDomain = WebConfigurationManager.AppSettings["ImagesDomain"]; //配置文件:网站域名 int dirtype = ; // 1:按天存入目录 2:按月存入目录 3:按扩展名存目录 建议使用按天存
int maxattachsize = ; // 最大上传大小,默认是2M
string upext = "txt,rar,zip,jpg,jpeg,gif,png,swf,wmv,avi,wma,mp3,mid"; // 上传扩展名
int msgtype = ; //返回上传参数的格式:1,只返回url,2,返回参数数组
string immediate = Request.QueryString["immediate"];//立即上传模式,仅为演示用
byte[] file; // 统一转换为byte数组处理
string localname = "";
string disposition = Request.ServerVariables["HTTP_CONTENT_DISPOSITION"]; string err = "";
string msg = "''"; if (disposition != null)
{
// HTML5上传
file = Request.BinaryRead(Request.TotalBytes);
localname = Server.UrlDecode(Regex.Match(disposition, "filename=\"(.+?)\"").Groups[].Value);// 读取原始文件名
}
else
{
//HttpFileCollectionBase filecollection = Request.Files;
//HttpPostedFileBase fileData = filecollection.Get(inputname); // 读取原始文件名
localname = fileData.FileName;
// 初始化byte长度.
file = new Byte[fileData.ContentLength]; // 转换为byte类型
System.IO.Stream stream = fileData.InputStream;
stream.Read(file, , fileData.ContentLength);
stream.Close(); //filecollection = null;
} if (file.Length == ) err = "无数据提交";
else
{
if (file.Length > maxattachsize) err = "文件大小超过" + maxattachsize + "字节";
else
{
string attach_dir, attach_subdir, filename, extension, target; // 取上载文件后缀名
extension = GetFileExt(localname); if (("," + upext + ",").IndexOf("," + extension + ",") < ) err = "上传文件扩展名必需为:" + upext;
else
{
switch (dirtype)
{
case :
attach_subdir = "month_" + DateTime.Now.ToString("yyMM");
break;
case :
attach_subdir = "ext_" + extension;
break;
default:
attach_subdir = "day_" + DateTime.Now.ToString("yyMMdd");
break;
}
attach_dir = xheditorUpload.Replace("~/", "") + "/" + attach_subdir + "/"; // 生成随机文件名
Random random = new Random(DateTime.Now.Millisecond);
filename = DateTime.Now.ToString("yyyyMMddhhmmss") + random.Next() + "." + extension; target = attach_dir + filename;
try
{
CreateFolder(Server.MapPath("~/" + attach_dir)); System.IO.FileStream fs = new System.IO.FileStream(Server.MapPath("~/" + target), System.IO.FileMode.Create, System.IO.FileAccess.Write);
fs.Write(file, , file.Length);
fs.Flush();
fs.Close();
}
catch (Exception ex)
{
err = ex.Message.ToString();
} // 立即模式判断
if (immediate == "") target = "!" + target;
target = jsonString(target);
if (msgtype == )
{
msg = "'" + imagesDomain + "/" + target + "'";
}
else
{
//url必须为绝对路径
msg = "{'url':'" + imagesDomain + "/" + target + "','localname':'" + jsonString(localname) + "','id':'1'}";
}
}
}
} file = null; //Response.Write("{'err':'" + jsonString(err) + "','msg':" + msg + "}");
return this.Content("{'err':'" + jsonString(err) + "','msg':" + msg + "}");
} string jsonString(string str)
{
str = str.Replace("\\", "\\\\");
str = str.Replace("/", "\\/");
str = str.Replace("'", "\\'");
return str;
} string GetFileExt(string FullPath)
{
if (FullPath != "") return FullPath.Substring(FullPath.LastIndexOf('.') + ).ToLower();
else return "";
} void CreateFolder(string FolderPath)
{
if (!System.IO.Directory.Exists(FolderPath)) System.IO.Directory.CreateDirectory(FolderPath);
}
#endregion
3.设置Model字段类型
[DataType("RichText")]
public string Texts { get; set; }
4.页面添加
@Html.EditorFor(t => t.Texts)
如果你只是为了测试下,使用以下测试页面,再加上 第二步即可。
以下相关代码请根据自己的情况修改
@{
ViewBag.Title = "Home Page";
} <div class="row">
<form id="InputFrm" name="InputFrm" action="@Url.Action("Save")" method="post" class="form-group">
<div class="form-group">
<textarea id="elm2" name="elm2" class="xheditor-mfull" rows="" cols="" style="width: 80%"></textarea>
</div>
<input type="submit" name="save" value="Submit" /> </form>
</div>
@section scripts
{
<script type="text/javascript" src="@Url.Content("~/Scripts/xheditor-1.2./xheditor-1.2..min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/xheditor-1.2./xheditor_lang/zh-cn.js")"></script>
<script type="text/javascript">
$('#elm2').xheditor({ upImgUrl: "@Url.Action("XhUpload","Image")", upImgExt: "jpg,jpeg,gif,png" });
</script>
}
效果图:
【HTML5+MVC4】xhEditor网页编辑器图片上传的更多相关文章
- ThinkPHP3.1.3 整合 UEditor百度编辑器 图片上传
第一步.前端模板实例化百度编辑器 <js file='__ROOT__/Data/UEditor/ueditor.config.js' /> <js file='__ROOT__/D ...
- Kindeditor JS 富文本编辑器图片上传指定路径
js //================== KindEditor.ready(function (K) { var hotelid = $("#hotelid").val(); ...
- 12-tinyMCE文本编辑器+图片上传预览+页面倒计时自动跳转
文本编辑器插件:1.将tinymce文件夹全部复制到webContent下2.tinymce/js目录下放 jquery等三个js文件3.语言包:tinymce/js/tinymce/langs目录下 ...
- Ueditor编辑器图片上传到万象优图
最近想用typecho做一个个人博客站,typecho的文本编辑器不能上传图片,我就用Ueditor替换的了原来的文本编辑器,听说腾讯的万象优图每月有50G的免费空间和流量,我就自己改了下Uedito ...
- 关于Discuz!nt论坛编辑器图片上传bug,flash域的问题
正在整discuz!nt,现在没有什么人弄了把? 上个星期突然来了个bug,搞死我了,论坛图片不能上传,上传卡在100%没反应了,于是我发现ajax发送到AttachUpload.cs时queryst ...
- xhEditor struts2实现图片上传
xhEditor的环境搭建请参考http://blog.csdn.net/itmyhome1990/article/details/38422255,这时我们打开图片功能 是没有上传按钮的 如果想要出 ...
- ueditor 百度编辑器图片上传 接 node.js 及一些前端自定义
百度编辑器 用node.js 做服务端 demo 大神已整理的 记录一下 以作参考 https://github.com/netpi/ueditor 1. 前端图片工具栏上传input file在这里 ...
- TinyMCE编辑器图片上传扩展(base64方式),asp.net mvc5
编辑器上传图片一般都是先上传到服务器中,若是用户取消或忘记提交表单就产生一张废图在空间里面,时间一长就产生大量占用空间的无用图片,现在就试试提交前先用base64,提交后,在后台处理编辑器内容中的&l ...
- html5异步单图片多图片上传两种实现方式 后台.net mvc接收
Asp.net mvc上传多张图片后台存储 前台页面通过<file name="img">标签数组上传图片,后台根据Request.Files["img&qu ...
随机推荐
- java "".split(",")
String[] string = "".split(","); 结果是string = []; String[] string = " " ...
- 最新Sublime Text 2 激活 汉化
0x00 Sublime Text 2 Sublime Text 2 是一个轻量.简洁.高效.跨平台的编辑器,一直在使用它,简直是coder的必备神器,自从使用它之后就深深爱上它了(/▽\=),可能因 ...
- SVN安装使用小结
SVN在实际的项目开发中有很广泛的用途.一开始接触SVN(Subversion),思路并不清楚,现在总算理清了. 声明:本文并不是系统地对SVN做介绍,而是笔者的使用总结,个人认为的一些要点,可能对初 ...
- Asp.net MVC的Model Binder工作流程以及扩展方法(2) - Binder Attribute
上篇文章中分析了Custom Binder的弊端: 由于Custom Binder是和具体的类型相关,比如指定类型A由我们的Custom Binder解析,那么导致系统运行中的所有Action的访问参 ...
- SQL Server调优系列基础篇(并行运算总结篇二)
前言 上一篇文章我们介绍了查看查询计划的并行运行方式. 本篇我们接着分析SQL Server的并行运算. 闲言少叙,直接进入本篇的正题. 技术准备 同前几篇一样,基于SQL Server2008R2版 ...
- iOS tabbar 自定义小红点 消息显示,定制边框、颜色、高宽
一般我们需要显示消息数,会利用到系统提供的api UIApplication.sharedApplication().applicationIconBadgeNumber = 10 但如果我们不想显示 ...
- linux下怎么查看ssh的用户登录日志
linux下登录日志在下面的目录里: cd /var/log 查看ssh用户的登录日志: less secure linux日志管理: 1. 日志简介 日志对于安全来说,非常重要,他记录了系统每天发生 ...
- spring + redis 实现数据的缓存
1.实现目标 通过redis缓存数据.(目的不是加快查询的速度,而是减少数据库的负担) 2.所需jar包 注意:jdies和commons-pool两个jar的版本是有对应关系的,注意引入jar包是要 ...
- PowerShell命令卸载Win10内置应用
Windows10系统预装了大批的应用,开始菜单右侧的磁贴即显示了其中的大部分,包括:人脉.日历.邮件.资讯.Xbox.Groove音乐.Camera相机.电影和电视.照片.手机助手.天气.OneNo ...
- [转]NopCommerce 多数据库方案
本文转自:http://www.cnblogs.com/YUTOUYUWEI/p/5538200.html 有时候一个项目需要连接多个数据库,以实现不同数据库的数据在同个项目的共享. 如果已经安装了n ...