asp.net KindEditor编辑器整合百度WebUploader插件批量上传图片

集成背景说明

多个图片进行批量上传新版本浏览器兼容性问题处理,原编辑器上传图片功能使用flash上传插件,由于最新版本浏览器不再支持flash,重新集成新的上传插件,对编辑器进行改造升级。

一、KindEditor介绍

KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。使用JavaScript编写,可以无缝的于Java、.NET、PHP、ASP等程序接合。

KindEditor非常适合在CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用,2006年7月首次发布2.0以来,KindEditor依靠出色的用户体验和领先的技术不断扩大编辑器市场占有率,目前在国内已经成为最受欢迎的编辑器之一。

主要特点:

1. 体积小,加载速度快,但功能十分丰富。

2. 内置自定义range,完美地支持span标记。

3. 基于插件的方式设计,所有功能都是插件,增加自定义和扩展功能非常简单。

4. 修改编辑器风格很容易,只需修改一个CSS文件。

5. 支持大部分主流浏览器,比如IE、Firefox、Safari、Chrome、Opera。

<script charset="utf-8" src="/static/plugins/kindeditor/kindeditor-min.js"></script>
<script charset="utf-8" src="/static/plugins/kindeditor/lang/zh_CN.js"></script>
<script charset="utf-8" src="/static/plugins/kindeditor/themes/default/default.css"></script>

二、WebUploader介绍

官网:
API:

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+

优点:
1,分片与并发结合,将一个大文件分割成多块,并发上传,极大地提高大文件的上传速度。当网络问题导致传输错误时,只需要重传出错分片,而不是整个文件。另外分片传输能够更加实时的跟踪上传进度。
2,预览、压缩.支持常用图片格式jpg,jpeg,gif,bmp,png预览与压缩,节省网络数据传输。
解析jpeg中的meta信息,对于各种orientation做了正确的处理,同时压缩后上传保留图片的所有原始meta数据。
3,多途径添加文件
支持文件多选,类型过滤,拖拽(文件&文件夹),图片粘贴功能。
粘贴功能主要体现在当有图片数据在剪切板中时(截屏工具如QQ(Ctrl + ALT + A), 网页中右击图片点击复制),Ctrl + V便可添加此图片文件。
4,HTML5 & FLASH
兼容主流浏览器,接口一致,实现了两套运行时支持,用户无需关心内部用了什么内核。同时Flash部分没有做任何UI相关的工作,方便不关心flash的用户扩展和自定义业务需求。
5,MD5秒传当文件体积大、量比较多时,支持上传前做文件md5值验证,一致则可直接跳过。
如果服务端与前端统一修改算法,取段md5,可大大提升验证性能,耗时在20ms左右。
6,易扩展、可拆分采用可拆分机制, 将各个功能独立成了小组件,可自由搭配。采用AMD规范组织代码,清晰明了,方便扩展。

缺点:
1,使用0.1.5在进行flash上传时,如果服务器端返回的不是一个json格式的字符串,webuploader.js代码将会报错,客户端接收不到返回信息。

webuploader插件,避雷指南:

WebUploader文件上传组件使用步骤及注意:

使用需要导入wepuploader的css文件、jquery.js以及webuploader.js文件。

<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css"> 
<!--SWF在初始化的时候指定在后面将展示-->
<script type="text/javascript" src="webuploader文件夹/webuploader.js"></script>

文件上传失败会派送uploadError事件,成功则派送uploadSuccess事件。不管成功或者失败,在文件上传完后都会触发uploadComplete事件。

三、扩展编辑器多图上传插件

参考:富文本编辑器Kindeditor升级版Kindeditor-plus体验

编辑器集成效果展示
多图上传改造
编辑器配置

案例上传基于阿里云oss,本文集成为自有文件服务程序,修改调整直接配置为上传后端程序处理url。

uploadJson为上传处理url

注意返回值尽量返回json,方便对返回值处理。如果接口返回其他格式,前端需要再做相应解析处理(response._raw获取返回的信息)。

上传成功处理事件

最后:

每个项目集成情况都不相同,无法给出具体代码,部分核心代码及思路仅供参考。现在开源解决方案也比较多,根据自己项目情况进行集成升级。

posted @ 2024-04-09 14:47  郑州-在路上  阅读(4)  评论(0编辑  收藏  举报