CKEditor+SWFUpload实现功能较为强大的编辑器(三)---后台接收图片流程

简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq1010885678/article/details/37519271 在...
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq1010885678/article/details/37519271

在前台配置完CKEditor和SWFUpload之后就可以满足基本的需求了

在这里,我配置的接收异步上传的图片的页面为upload.ashx

在这个ashx中对上传的图片处理的流程如下:

context.Response.ContentType = "text/plain";
            HttpPostedFile file = context.Request.Files["Filedata"];//接收到上传的图片
            string fileName = string.Empty;
            string fileExtension = string.Empty;
            if (file != null)
            {
                fileName = Path.GetFileName(file.FileName);//获取图片名
                fileExtension = Path.GetExtension(file.FileName);//获取扩展名
            }
            if (fileExtension == ".jpg")
            {
                string saveDir = "/upload/" + DateTime.Now.Year + "/" + DateTime.Now.Month + "/" + DateTime.Now.Day + "/";//根据当前年月日在upload文件夹中创建该图片的保存路径,便于管理
                Directory.CreateDirectory(Path.GetDirectoryName(context.Server.MapPath(saveDir)));//创建路径
                string fullDir = saveDir + GetMD5.GetFileMD5(file.InputStream) + fileExtension;//使用图片的md5作为该图片保存的名字
                file.SaveAs(context.Server.MapPath(fullDir));
                context.Response.Write("ok;" + fullDir);//保存完毕之后将图片的路径返回
            }
需要注意的几点是:

1.在服务器端保存文件一定要用绝对路径,如context.Server.MapPath(fullDir)

2.使用图片的md5值作为图片的名字,一来保证图片名不会重复,二来在用户上传同一张照片的时候可以将其覆盖


最后,功能比较完善的Ubb编辑器诞生了~~

不过由于编辑器可以转成源码模式

用户还是可以直接在源码模式下输入<,>这些符号

所以在后台接收用户输入的数据的时候

 msg = msg.Replace("<", "&lt").Replace(">", "&gt");

需要对<,>进行替换

最后的最后~

在向用户展示信息的时候,需要把ubb代码转换成html,这样浏览器才能解析

提供一个写好的静态类,要用的时候将ubb代码传进去,返回的就是html代码

UbbHelper

里面有挺多的问题,需要根据自己的需求更改代码


至此,大功告成!

相关文章
|
1月前
|
JavaScript 数据可视化
基于fabric.js的图片编辑器, 画布背景实现原理
基于vue3 + fabric.js + vite + element-plus + typescript等技术,画布背景原理分析
基于fabric.js的图片编辑器, 画布背景实现原理
|
2月前
|
JSON 前端开发 数据可视化
AMIS【部署 01】amis前端低代码框架可视化编辑器amis-editor本地部署流程
AMIS【部署 01】amis前端低代码框架可视化编辑器amis-editor本地部署流程
158 0
|
6月前
|
JavaScript
Vue CKEditor5 自定义编辑器详细流程(插件安装使用流程)
Vue CKEditor5 自定义编辑器详细流程(插件安装使用流程)
619 0
|
6月前
|
Web App开发 数据采集 人工智能
|
8月前
|
前端开发 JavaScript API
前端封装库/工具库的编辑器之CKEditor
在现代前端开发中,富文本编辑器是一个非常重要的组成部分。其中,CKEditor 是一个备受欢迎的 JavaScript 富文本编辑器库。
117 0
|
10月前
|
存储 JSON JavaScript
fabric.js开发图片编辑器可以实现哪些功能?多图
使用fabric.js开发了图片编辑器,用文字加动图的形式直观的分享出来,帮助做功能参考,项目已开源。
fabric.js开发图片编辑器可以实现哪些功能?多图
|
JSON JavaScript 前端开发
fabric.js开发图片编辑器的细节实现
如何用vue和fabric.js快速开发一款编辑器,并利用fabric.js的api提供标准编辑器的能力。
fabric.js开发图片编辑器的细节实现
Markdown (CSDN) MD编辑器(一)- 实现页内跳转
Markdown (CSDN) MD编辑器(一)- 实现页内跳转
271 0
|
数据可视化 数据挖掘 定位技术
kibana:运用TSVB编辑器实现时间序列可视化分析
前几期我们讲解了利用Kibana Lens来快速部署一套数据看板。这一期我们接着来讲讲kibana提供的TSVB编辑器(Time Series Visual Builder),即时间序列可视化编辑器
185 0
kibana:运用TSVB编辑器实现时间序列可视化分析
|
存储 缓存 前端开发
带你实现一个简单的多边形编辑器
带你实现一个简单的多边形编辑器
256 0
带你实现一个简单的多边形编辑器

相关实验场景

更多