UEditor 사용자 정의 이미지 영상 사이즈 검사 기능 구현 코드

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 ? 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로 업 로드 된 파일 을 읽 고 너비 가 높 아 관련 사이즈 나 비례 판단 을 실현 할 수 있 습 니 다.검사 효 과 는 다음 과 같 습 니 다.

다 중 업로드
다 중 사진 업 로드 는 주로 세 개의 파일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방법 에 검사 텍스트 추가

검사 효과:

UEditor 사용자 정의 이미지 동 영상 사이즈 검사 기능 의 구현 코드 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 UEditor 사용자 정의 이미지 동 영상 콘 텐 츠 는 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!