DDR爱好者之家 Design By 杰米
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
方法中增加校验文本校验效果:
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年05月03日
2024年05月03日
- 黄品源.2002-漫漫岁月情·珍藏集(引进版)【滚石】【WAV+CUE】
- NorahJones《NotTooLate》(2024)Hi-Res192kHz_24bit
- RIMZEE《FeedTheStreets》(2024)[FLAC]
- 杭天琪.1989-入梦(TP版)【中唱】【WAV+CUE】
- 彭正《十年》[320K/MP3][98.75MB]
- 彭正《十年》[FLAC/分轨][288.77MB]
- 群星《惜花芷 影视原声带》[320K/MP3][128.04MB]
- 群星《经典老歌.百万畅销》10CD[WAV+CUE]
- 王韫.1994-漫天雪花飘的都是我的爱(TP版)【新时代】【WAV+CUE】
- HI-FI顶级人声测试天碟《试音刀郎DXD》[WAV+CUE]
- 群星《惜花芷 影视原声带》[FLAC/分轨][281.23MB]
- 张国荣《风继续吹》[DSF][1.1G]
- 《海来阿木单曲91首合集》[WAV分轨][4G]
- 群星《慢HIGH舞王DISGO之反射》【WAV/整轨】
- 张德兰《心》wav