Как реализовать проверку размера (размера) образа с помощью 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 ответ