【HTML5+MVC4】xhEditor网页编辑器图片上传

简介: 准备工作: 创建一个MVC项目中,添加好xhEditor插件 相关用法:http://www.cnblogs.com/xcsn/p/4701497.html   注意事项:xhEditor分为v1.

准备工作:

创建一个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="30" cols="80" style="width: 96%">@Model</textarea>
<script type="text/javascript">
    $(document).ready(function () {
        $('#@ViewData.ModelMetadata.PropertyName').xheditor({ upMultiple: 5, 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"];     //配置文件: 上传文件保存路径,结尾不要带/
            string imagesDomain = WebConfigurationManager.AppSettings["ImagesDomain"];         //配置文件:网站域名
            int dirtype = 1;                 // 1:按天存入目录 2:按月存入目录 3:按扩展名存目录  建议使用按天存
            int maxattachsize = 2097152;     // 最大上传大小,默认是2M
            string upext = "txt,rar,zip,jpg,jpeg,gif,png,swf,wmv,avi,wma,mp3,mid";    // 上传扩展名
            int msgtype = 2;                 //返回上传参数的格式: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[1].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, 0, fileData.ContentLength);
                stream.Close();

                //filecollection = null;
            }

            if (file.Length == 0) err = "无数据提交";
            else
            {
                if (file.Length > maxattachsize) err = "文件大小超过" + maxattachsize + "字节";
                else
                {
                    string attach_dir, attach_subdir, filename, extension, target;

                    // 取上载文件后缀名
                    extension = GetFileExt(localname);

                    if (("," + upext + ",").IndexOf("," + extension + ",") < 0) err = "上传文件扩展名必需为:" + upext;
                    else
                    {
                        switch (dirtype)
                        {
                            case 2:
                                attach_subdir = "month_" + DateTime.Now.ToString("yyMM");
                                break;
                            case 3:
                                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(10000) + "." + 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, 0, file.Length);
                            fs.Flush();
                            fs.Close();
                        }
                        catch (Exception ex)
                        {
                            err = ex.Message.ToString();
                        }

                        // 立即模式判断
                        if (immediate == "1") target = "!" + target;
                        target = jsonString(target);
                        if (msgtype == 1)
                        {
                            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('.') + 1).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="12" cols="80" 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.2/xheditor-1.2.2.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/xheditor-1.2.2/xheditor_lang/zh-cn.js")"></script>
    <script type="text/javascript">
        $('#elm2').xheditor({ upImgUrl: "@Url.Action("XhUpload","Image")", upImgExt: "jpg,jpeg,gif,png" });
    </script>
}

效果图:

 

 

相关文章
|
1月前
利用html2canvas插件自定义生成名片信息并保存图片
这是一个利用html2canvas插件自定义生成名片信息并保存图片,自定义上传头像,自定义输入个人信息内容,自定义图片名称,并将生成的图片保存到本地
37 1
利用html2canvas插件自定义生成名片信息并保存图片
|
5月前
|
移动开发 前端开发 JavaScript
基于 HTML5 和 Canvas 开发的在线图片编辑器
基于 HTML5 和 Canvas 开发的在线图片编辑器
109 0
|
6月前
|
存储 移动开发 编解码
基于HTML5开发的Markdown在线编辑器
Markdown是一种轻量级标记语言,以其简洁易读的格式而备受程序员和作者们的青睐。随着互联网的发展,越来越多的在线Markdown编辑器应运而生,为用户提供了更加便捷、高效的写作和编辑环境。本文将探讨基于HTML5开发的Markdown在线编辑器的设计原理、功能特点以及技术优势。
130 4
|
2月前
HTML图片
【10月更文挑战第4天】HTML图片。
30 2
|
3月前
|
前端开发
Twaver-HTML5基础学习(37)network导出图片并下载
本文介绍了如何在Twaver-HTML5中将network导出为图片并提供下载,主要通过将network转换为canvas对象,然后转换为base64编码的图片进行展示和下载。
42 5
|
3月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
58 13
|
4月前
在线将多张图片拼接起来图工具HTML源码
在线将多张图片拼接成一张图片,多图合一并导出下载。无需本地安装软件。 下载时,使用日期时间作为文件名,规避图片文件名相同造成的覆盖问题;也能省去一部覆盖确认操作 多语言支持
47 0
在线将多张图片拼接起来图工具HTML源码
|
4月前
|
Python
Python 下载 html 中的 图片
Python 下载 html 中的 图片
35 2
|
5月前
|
数据采集 缓存 自然语言处理
PHP将HTML标签转化为图片
通过这个方法,PHP后端能够实现将HTML内容转化为图片的功能。这种方式虽然牵涉到一些额外的安装和配置,但能够相对灵活且稳定地解冀转换需求,适用于需要在后端动态生成图片的场景。
223 1
|
6月前
|
Web App开发 前端开发 Java
基于Spring3 MVC实现基于HTML form表单文件上传
基于Spring3 MVC实现基于HTML form表单文件上传
48 7
基于Spring3 MVC实现基于HTML form表单文件上传