UEditor 自定义图片视频尺寸校验功能的实现代码


Posted in Javascript onOctober 20, 2020

ueditor是百度编辑器,官网地址:http://ueditor.baidu.com/website/

UEditor支持单图、多图以及视频上传,编辑器配置项支持文件格式、文件大小校验,对于文件宽高尺寸校验暂不支持。这里记录一下自定义图片、视频尺寸校验过程,内容核心主要是扩展校验逻辑和增加自定义提示文本。

单图上传

单图上传的逻辑在ueditor.all.js中,由simpleUpload组件实现,其内部是通过监听file输入框的变化,来进行文件校验和上传。
下图initUploadBtn为初始化简单上传按钮方法,也是进行相关校验的地方。

UEditor 自定义图片视频尺寸校验功能的实现代码

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 ? filename.substr(filename.lastIndexOf('.')):'';
 if (!fileext || (allowFiles && (allowFiles.join('') + '.').indexOf(fileext.toLowerCase() + '.') == -1)) {
  showErrorLoader(me.getLang('simpleupload.exceedTypeError'));
  return;
 }  
 
 // 校验通过,上传文件
 domUtils.on(iframe, 'load', callback);
 form.action = utils.formatUrl(imageActionUrl + (imageActionUrl.indexOf('?') == -1 ? '?' : '&') + params);
 form.submit();
});

可以看到这里有好几处判断逻辑,全部通过后才提交表单上传文件。对于图片视频的尺寸校验,同样也可以加在这里,通过后才提交,以下为修改后的代码:

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 ? filename.substr(filename.lastIndexOf('.')):'';
 if (!fileext || (allowFiles && (allowFiles.join('') + '.').indexOf(fileext.toLowerCase() + '.') == -1)) {
  showErrorLoader(me.getLang('simpleupload.exceedTypeError'));
  return;
 }  
 //校验文件尺寸宽度
 var files = this.files;
 var reader = new FileReader();
 reader.readAsDataURL(input.files[0]);
 reader.onload = function (theFile) {
  var image = new Image();
  image.src = theFile.target.result;
  image.onload = function () {
   if (this.width < 1080) {
    showErrorLoader('宽度小于1080');
    return;
   }   
   // 校验通过,上传文件
   domUtils.on(iframe, 'load', callback);
   form.action = utils.formatUrl(imageActionUrl + (imageActionUrl.indexOf('?') == -1 ? '?' : '&') + params);
   form.submit();
   };
  };
});

代码中的校验参数1080,和提示文本规范作法是加在配置文件中,这里只起演示作用。

新增的尺寸校验,是使用FileReader读取上传的文件获得宽高,进而能够实现相关尺寸或者比例判断,校验效果如下:

UEditor 自定义图片视频尺寸校验功能的实现代码

多图上传

多图上传主要涉及三个文件,image.htmlwebupload.jsimage.js
webupload.js包含各种验证,包括文件总大小是否超出、单文件是否超出、文件是否重复等等,这里也可以增加自定义验证,它们会在Uploader初始化时被一并加载。

UEditor 自定义图片视频尺寸校验功能的实现代码

新增自定义图片尺寸校验方法如下:

/**
   * @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.jsaddFile方法中增加提示文本。

UEditor 自定义图片视频尺寸校验功能的实现代码

校验效果:

UEditor 自定义图片视频尺寸校验功能的实现代码

视频上传

视频上传同样也包含三个文件,video.htmlwebupload.jsvideo.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.jsaddFile方法中增加校验文本

UEditor 自定义图片视频尺寸校验功能的实现代码

校验效果:

UEditor 自定义图片视频尺寸校验功能的实现代码

到此这篇关于UEditor 自定义图片视频尺寸校验功能的实现代码的文章就介绍到这了,更多相关UEditor自定义图片视频内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript Prototype对象
Jan 07 Javascript
jquery实现邮箱自动补全功能示例分享
Feb 17 Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 Javascript
全面解析Bootstrap弹窗的实现方法
Dec 01 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
Jan 27 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
Backbone中View之间传值的学习心得
Aug 09 Javascript
浅谈js数组和splice的用法
Dec 04 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
微信小程序实现折叠与展开文章功能
Jun 12 Javascript
jQuery zTree插件快速实现目录树
Aug 16 jQuery
Vue+axios封装请求实现前后端分离
Oct 23 #Javascript
构建一个JavaScript插件系统
Oct 20 #Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
Oct 20 #Javascript
原生js实现俄罗斯方块
Oct 20 #Javascript
React实现评论的添加和删除
Oct 20 #Javascript
基于JavaScript实现简单抽奖功能代码实例
Oct 20 #Javascript
微信小程序使用前置摄像头拍照
Oct 22 #Javascript
You might like
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
php 判断服务器操作系统的类型
2014/02/17 PHP
thinkphp中字符截取函数msubstr()用法分析
2016/01/09 PHP
详解PHP的Yii框架中的Controller控制器
2016/03/29 PHP
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
13个绚丽的Jquery 界面设计网站推荐
2010/09/28 Javascript
写js时遇到的一些小问题
2010/12/06 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
JavaScript闭包实例讲解
2014/04/22 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
jQuery UI设置固定日期选择特效代码分享
2015/08/27 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
2016/07/09 Javascript
Vue.js 插件开发详解
2017/03/29 Javascript
微信小程序利用co处理异步流程的方法教程
2017/05/20 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
详解vue-cli 构建Vue项目遇到的坑
2017/08/30 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
django在接受post请求时显示403forbidden实例解析
2018/01/25 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
Python实现去除图片中指定颜色的像素功能示例
2019/04/13 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
Python shelve模块实现解析
2019/08/28 Python
Python partial函数原理及用法解析
2019/12/11 Python
python如何获得list或numpy数组中最大元素对应的索引
2020/11/16 Python
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
世界上最大的字体市场:MyFonts
2020/01/10 全球购物
沃尔玛加拿大:Walmart.ca
2020/03/02 全球购物
舞蹈毕业生的自我评价
2014/03/05 职场文书
我的中国梦演讲稿初中篇
2014/08/19 职场文书
党性分析材料格式
2014/12/19 职场文书
销售会议开幕词
2015/01/28 职场文书
承兑汇票延期证明
2015/06/23 职场文书
2016廉洁从政心得体会
2016/01/19 职场文书