ueditor是百度编辑器,官网地址:http://ueditor.baidu.com/website/
UEditor支持单图、多图以及视频上传,编辑器配置项支持文件格式、文件大小校验,对于文件宽高尺寸校验暂不支持。这里记录一下自定义图片、视频尺寸校验过程,内容核心主要是扩展校验逻辑和增加自定义提示文本。
单图上传
单图上传的逻辑在ueditor.all.js
中,由simpleUpload
组件实现,其内部是通过监听file
输入框的变化,来进行文件校验和上传。
下图initUploadBtn
为初始化简单上传按钮方法,也是进行相关校验的地方。
initUploadBtn
里默认校验代码如下:
var form = btnIframeDoc.getElementById('edui_form_' + timestrap); var input = btnIframeDoc.getElementById('edui_input_' + timestrap); var iframe = btnIframeDoc.getElementById('edui_iframe_' + timestrap); domUtils.on(input, 'change', function(){ if(!input.value) return; // 省略部分代码 /* 判断后端配置是否没有加载成功 */ if (!me.getOpt('imageActionName')) { errorHandler(me.getLang('autoupload.errorLoadConfig')); return; } // 判断文件格式是否错误 var filename = input.value, fileext = filename "htmlcode">var form = btnIframeDoc.getElementById('edui_form_' + timestrap); var input = btnIframeDoc.getElementById('edui_input_' + timestrap); var iframe = btnIframeDoc.getElementById('edui_iframe_' + timestrap); domUtils.on(input, 'change', function(){ if(!input.value) return; // 省略部分代码 /* 判断后端配置是否没有加载成功 */ if (!me.getOpt('imageActionName')) { errorHandler(me.getLang('autoupload.errorLoadConfig')); return; } // 判断文件格式是否错误 var filename = input.value, fileext = filename "text-align: center">多图上传
多图上传主要涉及三个文件,
image.html
、webupload.js
和image.js
。
webupload.js
包含各种验证,包括文件总大小是否超出、单文件是否超出、文件是否重复等等,这里也可以增加自定义验证,它们会在Uploader
初始化时被一并加载。新增自定义图片尺寸校验方法如下:
/** * @property {int} [fileSingleWidth=undefined] * @namespace options * @for Uploader * @description 验证单个文件尺寸满足要求, 不满足则不允许加入队列。 */ //====================== api.addValidator('fileSingleWidth', function () { var uploader = this, opts = uploader.options, minWidth = 1080; uploader.on('beforeFileQueued', function (file) { let that = this; let type = file.type; window.URL = window.URL || window.webkitURL; var reader = new FileReader(); reader.readAsDataURL(file.source.source); reader.onload = function (theFile) { var image = new Image(); image.src = theFile.target.result; image.onload = function () { if (this.width < minWidth) { file.setStatus(WUFile.Status.INVALID, 'exceed_width'); that.trigger('error', 'F_EXCEED_SIZE', file); that.removeFile(file); return false; } }; } }); });校验逻辑写好后,需要在
image.js
的addFile
方法中增加提示文本。校验效果:
视频上传
视频上传同样也包含三个文件,
video.html
、webupload.js
和video.js
,处理逻辑与多图上传一样。我们可以在上面校验图片宽度的基础上再扩展支持校验视频分辨率是否小于720,代码如下:/** * @property {int} [fileSingleWidth=undefined] * @namespace options * @for Uploader * @description 验证单个文件尺寸满足要求, 不满足则不允许加入队列。 */ //====================== api.addValidator('fileSingleWidth', function () { var uploader = this, opts = uploader.options, minWidth = 1080; uploader.on('beforeFileQueued', function (file) { let that = this; let type = file.type; window.URL = window.URL || window.webkitURL; // 校验视频分辨率 if (type.indexOf('video') > -1) { var video = document.createElement('video'); video.preload = 'metadata'; video.src = URL.createObjectURL(file.source.source); video.onloadedmetadata = () => { URL.revokeObjectURL(video.src); if (video.videoHeight < 720) { file.setStatus(WUFile.Status.INVALID, 'exceed_height'); that.trigger('error', 'F_EXCEED_SIZE', file); that.removeFile(file); return false; } } }else{ //校验图片宽度 var reader = new FileReader(); reader.readAsDataURL(file.source.source); reader.onload = function (theFile) { var image = new Image(); image.src = theFile.target.result; image.onload = function () { if (this.width < minWidth) { file.setStatus(WUFile.Status.INVALID, 'exceed_width'); that.trigger('error', 'F_EXCEED_SIZE', file); that.removeFile(file); return false; } }; } } }); });
vedio.js
的addFile
方法中增加校验文本校验效果:
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?