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

Я использую Bootstrap 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>

Таким образом, используя приведенный выше фрагмент кода, после просмотра выбранного изображения, он отображает предварительный просмотр изображения сразу без загрузки его на сервер. Он создает тег img В div» 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 блок выше).

Теперь я хочу интегрировать размер изображения (i.e измерение по ширине и высоте). Минимальная ширина должна быть 600px и минимальная высота должна быть 700px. Если пользователь хочет загрузить изображение, которое не удовлетворяет минимальной ширине и высоте, то предварительный просмотр не будет отображаться. Вместо этого может отображаться сообщение или текст метки может быть изменен в другой цвет.

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

$(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 , но не получил его там. Есть ли возможность сделать это?

1 ответ

  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>