富文本编辑器上传图片的功能

今天，我们来讲一下富文本编辑器上传图片功能的操作。首先，在这里需要引入一个js插件（config.js），在插件里面写下配置图片上传的路径。

接下来，既然要实现上传图片的功能，那我们就需要一个东西是用来接收表单里面的值（如下图）。在这里我是用HttpPostedFileBase 来接收表单上面传过来的值，就是传过来的图片。

文件的处理方式：一般我们会把文件保存到文件夹里面，这里我在做发布的时候创建了几个文件夹。

比如：我在Notice 文件夹里面创建四个文件夹，Notice是最终保存的文件夹。

第一个文件夹保存的是上传的附件；第二个是传入富文本编辑器的图片；第三个保存的是用于上传轮播图的图片；第四个保存的是富文本编辑器发布的内容，保存在一个input文本标签里面。

我们需要把文件放在临时文件夹。

其实，整个过程很简单，你先判断是否为空，若为空就返回上传的文件为空，不为空就进行下一步操作，获取文件后缀，在判断数据类型，检查目录是否存在，若不存在那就创建，拼接文件名、文件保存路径，保存，返回就可以了！

在这里，先创建一个名叫Ckeditor4UploadResult类，这个类里面有两个类。一个用来当你点击上传到服务器时候的数据，里面包含了上传成功的信息与上传文件的名称还有一个上传文件的URL编码，下面那个是接收另一个类的错误信息，显示出来的内容。另一个为了记录返回的错误信息。

//表示是上传成功 1成功 0失败public int uploaded { get; set; }//上传文件的名称public string fileName { get; set; }//上传文件的URL（URL编码）public string url { get; set; }//错误public Ckeditor4UploadResultErro error = new Ckeditor4UploadResultErro();}public class Ckeditor4UploadResultErro {//错误信息public string message { get; set; }}

接下来，判断如果不为空就要判断是否为图片，所以我们就要获取它的文件后缀。获取到文件后缀后，小写是因为后面的数据类型名称都是小写形式，然后我们就需要判断数据类型。我们需要判断fileExtension是否是这些数据类型中的某一个，否则返回文件类型错误。

我们还要检查目录是否存在，不存在就创建。

然后拼接文件名，当前时间加上唯一标识符。

接下来拼接保存文件的路径，如果担心写错可以打开目录看一下路径。然后呢，我们要拼接它的保存路径，把它保存在filePath里面，然后设置返回值，upload的返回值为1，fileName等于上面文件名，还有URL路径，路径的信息需要返回到上面（如下图）。

下面就是这整个富文本编辑器上传图片的完整代码。

 public ActionResult UpEditorFile(HttpPostedFileBase upload){Ckeditor4UploadResult ck = new Ckeditor4UploadResult();try{if (upload != null){//获取文件后缀string fileExtension = System.IO.Path.GetExtension(upload.FileName);fileExtension = fileExtension.ToLower();//小写//判断数据类型if ("(.gif)|(.jpg)|(.bmp)|(.jpeg)|(.png)".Contains(fileExtension)) {//检查目录是否存在,不存在就创建if (!Directory.Exists(Server.MapPath("~/Document/Temp/"))){Directory.CreateDirectory(Server.MapPath("~/Document/Temp/"));}//拼接文件名string fileName = DateTime.Now.ToString("yyyy-MM-dd") + "-" + Guid.NewGuid() + fileExtension;//拼接保存文件的路径string filePath = Server.MapPath("~/Document/Temp/")+fileName;//保存文件upload.SaveAs(filePath);//返回值ck.uploaded = 1;ck.fileName = fileName;ck.url = "/Document/Temp/" + fileName;}else{ck.error.message = "文件类型有问题";}}else {ck.error.message = "上传文件为空！";}}catch (Exception e){Console.WriteLine(e);ck.error.message = "上传失败！";}return Json(ck,JsonRequestBehavior.AllowGet);}

好了，到这里就结束了，希望对大家有所帮助！

富文本编辑器上传图片的功能相关推荐

vue quill富文本编辑器上传图片遇到的坑
在使用quill富文本编辑器上传图片的时候,很多地方都是成功的,但是唯有一处,上传图片总是失败,由此后端的朋友就说可以html标签转换成JSON字符串上传上去,展示的时候在转换回来,即可解决问题. 由 ...
ssh 使用 wangeditor3 富文本编辑器上传图片方法
这段时间在搞一个小网站的项目,其中有个功能是可以网页上编辑文字和图片,能一起上传到数据库然后在页面上展现,当然还可以上传附件,不过我现在还没弄好,先把上传图片的功能记录一下. 说到这个wangedit ...
使用wangEditor富文本编辑器上传图片和文字
"刘郎已恨蓬山远,更隔蓬山一万重" 序现在做的是从web端给眼镜端发送消息,其实就是web端把消息存到数据库,然后眼镜从数据库获取消息即可.现在在web端的输入框需要直接复制图片 ...
MVC+API 实现tinymce富文本编辑器上传图片、上传视频
首先是要下载一个版本,这里我自己用的放到GitHub上了 https://github.com/dhgr1/tinymce 之前我试过官网的以及别的地方的,但都会报错,我也没搞清楚原因,你们可以自己去 ...
vue3使用vue-quill实现富文本编辑器上传图片
最近开发的一个vue3+element-plus的项目,需要用到富文本编辑器,最终选择了VueQuill这一款轻便型的富文本编辑器:官网地址为 https://vueup.github.io/vue- ...
在Vue中使用Tinymce富文本编辑器+上传图片到七牛
公司官网后台需要做一个上传新闻.公告的功能,自然而然就需要用到了富文本编辑器. UEditor.Simditor.wangEditor.CKEditor.TinyMCE.Quill,这是当前比较热门的 ...
vue问题四：富文本编辑器上传图片
vue使用富文本编辑器上传图片: 我是用的是wangEditor 富文本编辑器 demo:http://www.wangeditor.com/ 1).安装依赖:npm install wangedit ...
layui富文本编辑器上传图片
layui是贤心大神的开源前端框架,也是对后端菜鸟非常友好的一个框架,平常开发的时候就比较喜欢使用这个,最近刚好写网站就到了layui的富文本编辑器,遇到一些有意思的事情,就和大家聊聊. 首先准备工作 ...
关于ckeditor富文本编辑器上传图片返回“不正确的服务器响应”的解决方案
最新由于项目需要,使用了ckeditor富文本编辑器,需要上传图片.在使用过程中突然发现,原来的ckeditor返回图片地址的方式返回"不正确的服务器响应".当时感觉好奇怪啊.明明 ...

富文本编辑器上传图片的功能

富文本编辑器上传图片的功能相关推荐

最新文章

热门文章