Sunday 21 May 2017

Restrict image height and width using J Query.

Restrict image height and width using J Query is very essay. find image upload event using "change" Event. Get image value using "val".

The Below code is very useful to all.

J Query Code
----------------------
$(function() {

var _URL = window.URL || window.webkitURL;

$("#gal_thumb_image").change(function(e) {
    var gal_thumb_image, img;

    if ((gal_thumb_image = this.files[0])) {
        img = new Image();
        img.onload = function() {
if(this.width!==250 || this.height!==250){
alert("Image size should be 250*250");
$('#gal_thumb_image').val('');
return false;
}
alert
        };
        img.onerror = function() {
            alert( "not a valid gal_thumb_image: " + gal_thumb_image.type);
        };
        img.src = _URL.createObjectURL(gal_thumb_image);


    }

});
});

HTML Code
---------------------
<input type="file" id="gal_thumb_image" name="gal_thumb_image"/>

Restrict image size using J Query

Restrict image size very essay. we can find image upload using "change" Event. get value using "val" attribute.

The below code useful  to find Image size

J Query Code
-------------------------
$(function() {
$("#gal_image").change(function(e) {
if(this.files[0].size >= 1073741824){
alert("Image file size should be below 1 GB");
$('#gal_image').val('');
return false;
}

});
});

HTML Code
----------------------

<input type="file" id="gal_image" name="gal_image"  />