zoukankan      html  css  js  c++  java
  • TinyMCE编辑器图片上传扩展(base64方式),asp.net mvc5

    编辑器上传图片一般都是先上传到服务器中,若是用户取消或忘记提交表单就产生一张废图在空间里面,时间一长就产生大量占用空间的无用图片,现在就试试提交前先用base64,提交后,在后台处理编辑器内容中的<img>标签src中的base64图片(保存成图片文件并返回相对地址字符串替换原来的base64编码图片,测试在新的TinyMCE编辑器(Version: 5.0.12 (2019-07-18))通过。浏览器为chrome

    代码:

               tinymce.init({
                    selector: 'textarea#Content',
                    plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help paste emoticons autosave ',
                    toolbar: 'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | 
                             styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | 
                             table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen',
                    menubar: false,
                    height: 500,
                    language: 'zh_CN',
                    images_upload_handler: function (blobInfo, success, failure) {
                        var reader = new FileReader();
                        reader.readAsDataURL(blobInfo.blob());
                        reader.onload = function () {
                            success(this.result);
                        }
                    }
                });
    

      plugins插件及toolbar工具栏内容自行删减添加,主要是 images_upload_handler这里,不知是TinyMCE5.x版本很强大,还是浏览器本身功能,编辑器中会自动base64编码与blob:http://协议互转。你在源码上看到的是非base64编码

    后台用到Regex类Replace方法的高级用法:此方法有个委托参数,用这参数可以传入一个方法,在这个方法里面进行主要操作(保存base64到空间中并返回图片地址的引用字符串)

    后台asp.net(c#)代码:

            public static string SaveBase64ToImageAndOutUrl(string htmlContent)
            {
                // 定义正则表达式用来匹配 img 标签 src属性中的base64代码  
                string strImg = @"data:image/(jpeg|png|gif|jpg|bmp);base64\,(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?";
    
                string content = Regex.Replace(htmlContent, strImg, new MatchEvaluator(CorrectString), RegexOptions.Compiled | RegexOptions.IgnoreCase);
                return content;
            }
    
            private static string CorrectString(Match match)
            {
                string imgSrc = match.Value;
                if (imgSrc.Substring(0, 10) != "data:image")
                    return imgSrc;
    
                double size = imgSrc.Split(',')[1].TrimEnd('=').Length * .75;
    if (size > Config.SiteConfig.ImageUploadSize * 1048576) throw new Exception("内容中有些图片过大!"); Response rsp = Upload.Base64ToImageAndSave(imgSrc, "/Upload"); if (rsp.Code == 0) throw new Exception(rsp.Message); return rsp.Data; }

      

    上面代码涉及到的类Respones

        public class Response
        {
            /// <summary>
            /// 返回代码. 0-失败,1-成功
            /// </summary>
            public int Code { get; set; }
    
            /// <summary>
            /// 返回消息
            /// </summary>
            public string Message { get; set; }
    
            /// <summary>
            /// 返回数据
            /// </summary>
            public dynamic Data { get; set; }
    
            public Response()
            {
                Code = 0;
            }
        }
    

      

    上面的base64保存图片的方法,请参考博客园里其他大侠写的,好多好多,我就不再贴上来了

    缺点就是客户端查看源代码时会很慢,另外图片多或图片大时提交数据时要在web.config中设置,不然提交不了。这里设置了6MB,可以根据需要设置大小

      <system.web>
        <!-- 表单提交处理总长度(maxRequestLength)为6MB -->
        <httpRuntime maxRequestLength="6291456"/>
      </system.web>
    

      

  • 相关阅读:
    atitit,it人怎么样才容易事业成功?? 有以下五种性格的人容易成功
    atitit。win7 win8 win9 win10 win11 新特性总结与战略规划
    atitit.提升兼容性最佳实践 o9o
    atitit.attilax.com产品 软件项目通用框架类库总结
    atitit. 文件上传带进度条 atiUP 设计 java c# php
    atitit.窗体静听esc退出本窗体java swing c# .net php
    atitit.提升研发管理的利器---重型框架 框架 类库的区别
    atitit.导出excel的设计----查询结果 导出为excel的实现java .net php 总结
    atitit. java跟php的比较..为什么大企业喜欢java 而不是php
    atitit. java jsoup html table的读取解析 总结
  • 原文地址:https://www.cnblogs.com/wujiying/p/Base64UploadImage.html
Copyright © 2011-2022 走看看