Jasny Bootstrapでイメージサイズ（寸法）検証を実装する方法

Question

Jasnyのブートストラップを使用して、イメージのプレビューを表示してアップロードしています。

HTMLの構造は以下のとおりです。したがって

<div class="fileinput fileinput-new" data-provides="fileinput"> 

    <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="display: block; width: 100%; min-height: 150px;"></div> 

    <div style="width: 100%;"><label>Min. width: 600px, height: 700px </label></div> 

</div> 

、上記のコードを使用して、選択された画像を閲覧した後、それがサーバーにアップロードすることなく、すぐに画像のプレビューを表示します。以下のような "fileinput-preview thumbnail" div内にimgタグを作成します。

<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="display: block; width: 100%; min-height: 150px; line-height: 150px;"> 
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAMDAwMDAwMDAwMEAwMDBQYFAwMFBgcGBgYGBgcJBwcHBwcHCQgJCQoJCQgMDA0NDAwRERERERISEhISEhISEhL/2wBDAQQEBAcGBw4JCQ4RDgsOERQhISEhISEhISEhISEhISEhISEhL/wgARCAEyArwDAREAAhEBAxEB/8QAHAAAAgMBAQEBAAAAAAAAAAAAAgMAAQQFBgcILbx+pb+MtrNid0//Z"></div> 

私は（上記の別のdivブロックを追加して）別の画像アップロードブロックを作成し、同じフォーム内の「別の画像を追加]ボタンを持っています。

今、画像サイズ（幅と高さの次元）を統合したいと考えています。最小幅は600ピクセル、最小高さは700ピクセルです。最小幅と高さを満たさない画像をアップロードしたい場合、プレビューは表示されません。代わりに、メッセージを表示することも、ラベルテキストを異なる色に変更することもできます。

だから、私は私がhttp://www.jasny.net/bootstrap/2.3.1/javascript.html#fileuploadからとhttps://coderwall.com/p/avyx3a/jasny-bootstrap-file-upload-with-existing-fileからの助けを見つけることを試み、以下のコード

$(function() { 
    $('.fileinput-preview').on('DOMNodeInserted', function(event) { 
     var imgdata = ($('.fileinput-preview img').attr('src')); 
     var h = imgdata.height; 
     var w = imgdata.width; 
     console.log(w + ' ' + h); 
    }) 

}); 

を使用しようとしましたが、そこにそれを取得できませんでした。これを行うためにとにかくありますか？

Answer 1

上記の解決策は次のとおりです。

<script> 
var DD=jQuery.noConflict(); 

function abc(){ 
    DD("div.fileinput-preview").each(function() { 
     var pDiv=this; 

     DD(this).on('DOMNodeInserted', function() { 
      var img = new Image(); 
      img.src = (DD('img', this).attr('src')); 

      img.onload = function() { 
       var w=img.width; 
       var h=img.height; 

       if(w < 600 || h < 700) { 
        DD(pDiv).parents('.fileinput').fileinput('clear'); 
        DD(pDiv).parents('.fileinput').find('.min_msg').css("color", "red"); 
       } else { 
        DD(pDiv).parents('.fileinput').find('.min_msg').css("color", "black"); 
       } 
      } 
     }) 

    }); 
} 



DD(function() { 
    abc(); 

    DD('.blt-add-new-image').on('click', function(){ 
     abc(); 
    }) 
}); 
</script>