如何使用 Jasny 实现图像大小(维度)验证 Bootstrap
How to implement image size (dimension) validation with 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>
我在同一个表单中有一个 'Add Another Image' 按钮,它创建另一个图像上传块(它添加了另一个 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 and from https://coderwall.com/p/avyx3a/jasny-bootstrap-file-upload-with-existing-file 那里寻求帮助,但没有成功。有办法吗?
上面的解决方法是:
<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>
我正在使用 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>
我在同一个表单中有一个 'Add Another Image' 按钮,它创建另一个图像上传块(它添加了另一个 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 and from https://coderwall.com/p/avyx3a/jasny-bootstrap-file-upload-with-existing-file 那里寻求帮助,但没有成功。有办法吗?
上面的解决方法是:
<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>