C# Umeditor 编辑器上传本地视频、本地文件

Umeditor
最近在做一个网站，涉及到网站文章的编辑。Umeditor是一个很好的选择，但是看了一下Umeditor，发现不能上传本地视频和本地文件，而项目又要得比较急，所以以我觉得最快的方式修改了Umeditor.js。

效果展示

温馨提示：这个地方不要上传大视频

1、下载Umeditor相关文件

Umeditor下载
运行index.html。可以看见这时候不能上传本地视频

2、上传本地Video。

1、打开video.js。在这个地方后面添加以下代码

 '<table style="margin-bottom: 10px">' +'<tr><td>'+'<span style="font-weight: bold;margin-left: 6px;"><%=lang_video_upload%></span>' +'<input id="uploadVideo" style="margin-left: 5px;" type="file" hidefocus name="upVideo" accept="video/MP3,video/MP4,video/WEBM,video/MPEG,video/AVI,video/WMV,video/OGG,video/EVA,video/MOV"/>' +'</td></tr>' +'</table>' +

2、同时在video函数内添加以下代码

 videoOnChange() {var me = this;var objUrl = me.getObjectURL($('#uploadVideo')[0].files[0]); //获取video的路径if (objUrl) {me.upload();}},upload: function () {document.getElementById("videoMask").style.display = "block";var me = this;var href = me.getRootPath() + "/ForegroundArticle/uploadAllFile?Path=\\Upload\\ArticleFiles\\Video";//后台Controller上传文件的地址var videoVal = $('#uploadVideo')[0].files[0];var file = new FormData();file.append('file', videoVal);$.ajax({url: href,type: "post",data: file,cache: false,contentType: false,processData: false,success: function (data) {document.getElementById("videoMask").style.display = "none";var res = JSON.parse(data);$("#eduiVideoUrl").val(res.data.src);me.createPreviewVideo(res.data.src);}});},getRootPath: function () {var curWwwPath = window.document.location.href;var pathName = window.document.location.pathname;var pos = curWwwPath.indexOf(pathName);//获取主机地址，var localhostPaht = curWwwPath.substring(0, pos); return localhostPaht;},getObjectURL(file) {var url = null;if (window.createObjectURL != undefined) { // basicurl = window.createObjectURL(file);} else if (window.URL != undefined) { // mozilla(firefox)url = window.URL.createObjectURL(file);} else if (window.webkitURL != undefined) { // webkit or chromeurl = window.webkitURL.createObjectURL(file);}return url;},getObjectType(file) {var type = "";if (file != null) {var typeSplit = file.type.split("/");if (typeSplit.length == 2) {type = typeSplit[1].toLowerCase();}}return type;}

此处的getObjectType()和getObjectURL()是同样的方法，可以放在一个地方共用。我没有放一起而已。
3、后台Controller代码

/// <summary>/// 上传所有文件/// </summary>/// <param name="Path"></param>/// <returns></returns>public string uploadAllFile(string Path = "UpLoad\\"){Path = Path + "\\" + DateTime.Now.ToString("yyyy-MM-dd");//根据日期分类LayuiFileResult res = new LayuiFileResult();try{HttpPostedFileBase fileData = Request.Files[0];if (fileData != null && fileData.ContentLength > 0){string fileSavePath = Server.MapPath("~") + Path;int size = fileData.ContentLength;//获取文件的扩展名string extName = System.IO.Path.GetExtension(fileData.FileName);string universalUploadExts = ConfigurationManager.AppSettings["UniversalUpLoadExtension"].ToString();var universalUploadList = universalUploadExts.Split(',').ToList();string zipUpLoadExts = ConfigurationManager.AppSettings["ZipUpLoadExtension"].ToString();var zipUpLoadList = zipUpLoadExts.Split(',').ToList();string videoUpLoadExts = ConfigurationManager.AppSettings["VideoUpLoadExtension"].ToString();var videoUpLoadList = videoUpLoadExts.Split(',').ToList();string fileUpLoadExts = ConfigurationManager.AppSettings["FileUpLoadExtension"].ToString();var fileUpLoadList = fileUpLoadExts.Split(',').ToList();universalUploadList.AddRange(zipUpLoadList);universalUploadList.AddRange(videoUpLoadList);universalUploadList.AddRange(fileUpLoadList);universalUploadList.ForEach(i => i.ToLower());if (!universalUploadList.Contains(extName.ToLower())){res.code = -1;res.msg = "上传失败，不支持该格式文件！";}else{//得到一个新文件的名称string newName = Guid.NewGuid().ToString() + extName;//如果文件目录不存在 创建目录if (!System.IO.Directory.Exists(fileSavePath)){System.IO.Directory.CreateDirectory(fileSavePath);}//服务器保存文件string path = System.IO.Path.Combine(fileSavePath, newName);fileData.SaveAs(path);List<string> FilsDicNames = Path.Split('\\').Where(i => !string.IsNullOrEmpty(i)).ToList();foreach (var item in FilsDicNames){res.data.src = res.data.src + ("/" + item);}res.data.src = res.data.src + "/" + newName;res.data.FileName = fileData.FileName;}}}catch (Exception ex){res.code = -1;res.msg = ex.Message;Logger.Write(typeof(DefaultController), "DefaultController：uploadAllFile" + ex.Message);}return JsonConvert.SerializeObject(res);}

4、LayuiFileResult：上传文件的返回值

//上传文件的返回值public class LayuiFileResult{public int code { get; set; } = 1;public string msg { get; set; } = "成功";public FileInfo data { get; set; } = new FileInfo();}

到此，可以上传本地视频。
解决百度umeditor 无法插入.MP4 .avi 视频格式的问题

3、上传本地附件

1、打开zh-cn.js。添加以下代码

2、打开Umeditor.js，添加以下代码：

在createUI中添加以下代码：

//附件上传隐藏框var upID = "#uploadFile_" + id.replace("#", "");if ($(upID).length == 0) {var $upFile = $('<input id=' + (upID.replace("#", "")) + ' style="display:none" type="file"/>');$upFile.insertBefore($container);$(upID).on("change", function () {var objUrl = getObjectURL($(upID)[0].files[0]);if (objUrl) {uploadFile(editor);}});}

//文件上传相关---开始UM.registerUI('upFile', function (name) {var me = this;var upID = "#uploadFile_" + me.$body.selector.replace("#","");var $btn = $.eduibutton({icon: name,click: function () {setTimeout(function () {$(upID).click();}, 500);},title: '附件上传'});this.addListener('selectionchange', function () {//切换为不可编辑时，把自己变灰var state = this.queryCommandState(name);$btn.edui().disabled(state == -1).active(state == 1)});return $btn;});function uploadFile(me) {var upID = "#uploadFile_" + me.id.replace("#", "");var href = getRootPath() + "/ForegroundArticle/uploadAllFile?Path=\\Upload\\ArticleFiles\\Files";var fileVal = $(upID)[0].files[0];var file = new FormData();file.append('file', fileVal);$.ajax({url: href,type: "post",data: file,cache: false,contentType: false,processData: false,success: function (data) {var res = JSON.parse(data);var innerHtml = "<a href=\"" + res.data.src + "\" target=\"_self\" >" + res.data.FileName + "</a>";UM.getEditor(me.id).execCommand('inserthtml', innerHtml);}});}function getObjectURL(file) {var url = null;if (window.createObjectURL != undefined) { // basicurl = window.createObjectURL(file);} else if (window.URL != undefined) { // mozilla(firefox)url = window.URL.createObjectURL(file);} else if (window.webkitURL != undefined) { // webkit or chromeurl = window.webkitURL.createObjectURL(file);}return url;}function getRootPath() {var curWwwPath = window.document.location.href;var pathName = window.document.location.pathname;var pos = curWwwPath.indexOf(pathName);//获取主机地址，var localhostPaht = curWwwPath.substring(0, pos);return localhostPaht;}//文件上传相关--结束

到此，便可以上传附件了

C# Umeditor 编辑器上传本地视频、本地文件相关推荐

pbootcms后台编辑器上传mp4视频默认黑屏不显示如何解决
pbootcms后台编辑器上传mp4视频默认黑屏不显示如何解决首先找到编辑的配置文件js,路径:core / extend / ueditor 将ueditor.all.min.js文件下载下来, ...
tinymce编辑器上传本地视频预览
小白一枚,最近搞搞tinymce编辑器上传视频预览,视频标签变成了图片标签问题,看看之前其他博主的说明,感jio好麻烦,官网的也没整明白,所以自己瞎整整.勿喷!勿喷!勿喷!重要事情说三遍首先是在ti ...
angular ng2-file-upload 上传多视频、多图片，并本地预览；后端C#接收
做好的效果展示: 1. 安装ng2-file-upload npm install ng2-file-upload --save 2.集成到module中在appmodule中: import { ...
Android Studio将本地计算机文件上传到模拟器scard文件中
本人在学习Android开发中遇到这样一个问题,将本地计算机中一个视频上传到模拟器的scard文件中视频的名字是1.MP4![这里写图片描述](https://img-blog.csdn.net/20 ...
小程序一次性上传多个本地图片，上拉加载照片以及图片加载延迟解决之道
一:小程序之一次性上传多个本地相片最近由于项目需要所以学了下小程序,也做了一些东西,随后便有了以下的一些总结了,现在说说如何使用小程序一次性上传多个本地相片. 问题描述最近做项目的时候要实现一个上 ...
[html] 图片上传时实现本地预览功能的原理是什么？
[html] 图片上传时实现本地预览功能的原理是什么? 通过HTML5 File API读取用户上传的图片,生成一个image对象显示到页面个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容 ...
如何将常用的软件上传到ESXi本地存储中管理
一.如何将常用的软件上传到ESXi本地存储中管理在使用虚拟机时,我们可能需要多个软件.比如部署操作系统需要CentOS或者Windows的镜像,再基于操作系统安装数据库可能有需要SQLServer. ...
百度编辑器上传视频以及视频编辑器预览bug解决
百度编辑器目前来讲是运用比较广泛的一个编辑器了,不仅开源还有中文的文档,所以很受欢迎,不过里面也有许多地方需要开发人员自己调试,其中一个比较常见的问题就是上传视频了,上传视频本身有一些小bug,这个基 ...
SpringBoot 使用MultipartFile上传组件实现本地上传用户头像
GIF动图展示 SpringBoot 使用MultipartFile上传组件实现本地上传用户头像GIF效果图本章目录 GIF动图展示主要实现思路 1.使用MultipartFile需要引入的依赖 ...