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); 
          } 
         }); 
        } 
       }); 
      }, 

の一部でありますデータまたは他の場所。あなたはデフォルトprocess queue 以下の例にcostomised process actionを追加することができます おかげ

Answer 1

は1920×1080の画像が通過できるようになります。非画像ファイルはスキップされます。 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(); 
     } 
    } 
});