blueimp에서 이미지 파일 업로드의 너비와 높이가 표시되지 않습니다.

Question

파일 업로드에 blueimp를 사용하고 있습니다. 잘 작동합니다. 하지만 특정 너비/높이의 이미지로 업로드하고 싶습니다. 이 파일을 얻을 수있는 정확한 위치는 내가 blueimp fileupload - check the image width and height before upload 파일 만이 데이터

lastmodified:1502124635085 
name:name.jgp 
size:111111 
type:"image/jpeg" 

그러나 폭과 높이가 아래 누락을 데이 링크를 따라하려고 코드

add: function (e, data) { 
       if (e.isDefaultPrevented()) { 
        return false; 
       } 

       console.log(data.files[0]); 

       var $this = $(this), 
        that = $this.data('blueimp-fileupload') || 
         $this.data('fileupload'), 
        options = that.options; 
       data.context = that._renderUpload(data.files) 
        .data('data', data) 
        .addClass('processing'); 
       options.filesContainer[ 
        options.prependFiles ? 'prepend' : 'append' 
       ](data.context); 
       that._forceReflow(data.context); 
       that._transition(data.context); 
       data.process(function() { 
        return $this.fileupload('process', data); 
       }).always(function() { 
        data.context.each(function (index) { 
         $(this).find('.size').text(
          that._formatFileSize(data.files[index].size) 
         ); 
        }).removeClass('processing'); 
        that._renderPreviews(data); 
       }).done(function() { 
        data.context.find('.start').prop('disabled', false); 
        if ((that._trigger('added', e, data) !== false) && 
          (options.autoUpload || data.autoUpload) && 
          data.autoUpload !== false) { 
         data.submit(); 
        } 
       }).fail(function() { 
        if (data.files.error) { 
         data.context.each(function (index) { 
          var error = data.files[index].error; 
          if (error) { 
           $(this).find('.error').text(error); 
          } 
         }); 
        } 
       }); 
      }, 

의 일부입니다 데이터 또는 다른 곳에서. 감사

Answer 1

당신은 예를 아래에만 1920 × 1080로 이미지를 통과 할 수 있도록 기본 process queue 에 costomised process action을 추가 할 수 있습니다. 비 이미지 파일은 건너 뜁니다. FileReader은 당신이 단지 폭과 이미지의 높이를 얻고 싶다면 IE10은 +

$.blueimp.fileupload.prototype.options.processQueue.push({action: 'validateImage'}); 

// add a customised validator for image width for height, 1920x1080 
$.widget('blueimp.fileupload', $.blueimp.fileupload, { 
    processActions: { 
     validateImage: function(data) { 
     var dfd = $.Deferred(); 
     var file = data.files[data.index]; 
     if(!/(\.|\/)(gif|jpe?g|png)$/i.test(file.name)){ 
      dfd.resolveWith(this, [data]); 
     } 
     else { 
      var reader = new FileReader(); 
      reader.readAsDataURL(file); 
      reader.onload = function() { 
      var image = new Image(); 
      image.src = reader.result; 
      image.onload = function() { 
       if(this.width !== 1920 || this.height !== 1080) { 
       data.files.error = true 
       file.error = 'Image have to be 1920x1080'; 
       dfd.rejectWith(this, [data]); 
       } 
       else { 
       dfd.resolveWith(this, [data]); 
       } 
      } 
      }; 
     } 
     return dfd.promise(); 
     } 
    } 
});