如何使用 Jasny Bootstrap 实现图像大小（尺寸）验证答案

【问题标题】：How to implement image size (dimension) validation with Jasny Bootstrap如何使用 Jasny Bootstrap 实现图像大小（尺寸）验证
【发布时间】：2016-12-29 11:54:29
【问题描述】：

我正在使用 Jasny 的 Bootstrap 显示图像预览并上传。

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>

所以，使用上面的代码sn-p，在浏览完选择的图片后，它会立即显示图片的预览，而不是上传到服务器上。它在“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 像素。如果用户要上传不满足最小宽度和高度的图像，则不会显示预览。而是可以显示一条消息或将标签文本更改为不同的颜色。

所以，我尝试使用下面的代码

$(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 寻求帮助，但没有得到帮助。有没有办法做到这一点？

【问题讨论】：

How to Preview Image, get file size, image height and width before upload?的可能重复
@DarrenSweeney：我已经编辑了我的问题并添加了更多相关信息。我不认为这是一个可能的重复。能否请您重新检查并帮助我找到解决方案？

标签： javascript jquery twitter-bootstrap jquery-plugins jasny-bootstrap

【解决方案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>

【讨论】：