如何使用Jasny Bootstrap實現圖像大小（尺寸）驗證

我正在使用Jasny的Bootstrap來顯示圖像的預覽並上載它。如何使用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>

因此，使用上面的代碼段，瀏覽所選擇的圖像之後，將顯示圖像的預覽，而不立即上傳上服務器。它在「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塊）相同的形式內的「添加另一幅影像」按鈕。

現在，我想集成圖像大小（即在寬度和高度尺寸）驗證。最小寬度應爲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尋求幫助，但沒有得到它。無論如何要做到這一點？

來源

2016-12-29 Debashis

的可能的複製[？如何預覽圖像，上傳之前獲得文件的大小，圖像的高度和寬度（http://stackoverflow.com/questions/12570834/如何預覽圖像獲取文件大小圖像高度和寬度之前上傳） –

@DarrenSweeney：我編輯了我的問題，並添加了更多關於它的信息。我不認爲這是可能的重複。你能否重新檢查並幫助我獲得解決方案？ – Debashis

上述的解決方案是：

<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>

來源

2016-12-30 12:31:30 Debashis

如何使用Jasny Bootstrap實現圖像大小（尺寸）驗證

回答

相關問題