Как реализовать проверку размера изображения (размерности) с помощью Jasny Bootstrap

Question

Я использую Bootstrap Jasny's, чтобы отображать предварительный просмотр изображения и загружать его.

Структура 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> 

Таким образом, с помощью приведенного выше фрагмента кода, после просмотра выбранного изображения, он показывает предварительный просмотр изображения сразу без его загрузки на сервере. Он создает тег img в элементе «fileinput-preview thumbnail», который выглядит как что-то внизу.

<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 пикселей. Если пользователь хочет загрузить изображение, которое не удовлетворяет минимальной ширине и высоте, то предварительный просмотр не будет отображаться. Вместо этого может отображаться сообщение или текст ярлыка можно изменить на другой цвет.

Итак, я попытался использовать код ниже

$(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); 
    }) 

}); 

Я пытался найти помощь от http://www.jasny.net/bootstrap/2.3.1/javascript.html#fileupload и от https://coderwall.com/p/avyx3a/jasny-bootstrap-file-upload-with-existing-file, но не получил его там. Есть какой-либо способ сделать это?

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>