dimension of an image and then check the critera

Question

I need a functionality in which i am uploading an image and checking the max criteria.if the image is bigger then max criteria then show alert msg

alert("Height is bigger then our max criteria pls select image max height and width =etc");

I am able to do all functionality but when I am uploading image then i am giving a condition to show the selected image actual Hight an Width.and i am getting previous image height an width

my coading is:

<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"></link>
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://jqueryui.com/resources/demos/style.css" rel="stylesheet"></link>
<script type="text/jquery">



    function readImage(file) {

    var reader = new FileReader();
    var image = new Image();
    var maxh = 800;
    var maxw = 800;
    reader.readAsDataURL(file);
    reader.onload = function (_file) {
        image.src = _file.target.result; // url.createObjectURL(file);
        image.onload = function () {
            var w = this.width,
                h = this.height,
                t = file.type, // ext only: // file.type.split('/')[1],
                n = file.name,
                s = ~~ (file.size / 1024) + 'KB';
            if (w > maxw && h > maxh) {
                alert("Height is bigger then over max criteria pls select image max height and width                                            =2024X2024");
                alert(width);
                alert(height);
            } else {


                $('#uploadPreview').html('<img src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>');
            }

        };
        image.onerror = function () {
            alert('Invalid file type: ' + file.type);
        };
    };

}
$("#choose").change(function (e) {
    if (this.disabled) return alert('File upload not supported!');
    var F = this.files;
    if (F && F[0]) for (var i = 0; i < F.length; i++) readImage(F[i]);
});

</script>



<style>

  #uploadPreview img {
    height:32px;
}

</style>
</head>
<body >
<input type="file" id="choose" multiple="multiple" />
<br>
<div id="uploadPreview"></div>

</body>
</html>

Question/problem: Each time i am getting previous selected image dimension not current image image dimension.

Hope you understand my question

I think problem in is my given Id.Because I am getting image url of "blah" and its the id of selected image which display in div.thats why its showing previous image dimension.isn't it? — sonalgoyal, Dec 16 '13 at 09:38
It's because you are checking the width and height of the source of id="blah", which does not get updated until later. — C. S., Dec 16 '13 at 09:43

score 2 · Accepted Answer · edited May 23 '17 at 12:11

See THIS FIDDLE, the important change is that your logic is wrong- you're checking the height and width against the previously uploaded image (blah), you actually need to execute the upload to check the properties- and then determine what action to take.

Note that the below/linked example takes this answer on SO, edited for your purposes.

HTML

<input type="file" id="choose" multiple="multiple" />
<br>
<div id="uploadPreview"></div>

JS

function readImage(file) {

    var reader = new FileReader();
    var image = new Image();
    var maxh = 800;
    var maxw = 800;
    reader.readAsDataURL(file);
    reader.onload = function (_file) {
        image.src = _file.target.result; // url.createObjectURL(file);
        image.onload = function () {
            var w = this.width,
                h = this.height,
                t = file.type, // ext only: // file.type.split('/')[1],
                n = file.name,
                s = ~~ (file.size / 1024) + 'KB';
            if (w > maxw && h > maxh) {
                alert("Height is bigger then over max criteria pls select image max height and width                                            =2024X2024");
                alert(width);
                alert(height);
            } else {


                $('#uploadPreview').html('<img src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>');
            }

        };
        image.onerror = function () {
            alert('Invalid file type: ' + file.type);
        };
    };

}
$("#choose").change(function (e) {
    if (this.disabled) return alert('File upload not supported!');
    var F = this.files;
    if (F && F[0]) for (var i = 0; i < F.length; i++) readImage(F[i]);
});

its working in fiddle but not in my html page.please check that where is the problem in my coading.i adding code in my Question. — sonalgoyal, Dec 16 '13 at 09:59

dimension of an image and then check the critera

1 Answers1