How to get image size in JQuery/JavaScript

By
Get Image Size In Jquery
We know how to get the image size in C# but there are also a way to measure the size of  file or any image size in client side with Jquery or JavaScript. Getting the image size at client side some time necessary because we don't want to go server side for measure the size of image.Yes some time we don't want to check it on server side. Because if we check server then its going to server then check and response to client off-course its time taken process.So why not try it on client side with the help of javascript or jquery .I am not going here to tell what is server side and what is client side. I give a simple example with code. Please have a look .

Get Image Size in jquery or javascript

<!DOCTYPE html>
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#divImageSize').find('#fileUpload').change(function () {
                CalculateImageSize();
            })
        })
        function CalculateImageSize() {
            var imgSize = ($('#divImageSize').find("input[name='fileUpload']")[0].files[0].size / 1024);
            var actualByteSize = imgSize;
            if (imgSize / 1024 > 1) {
                if (((imgSize / 1024) / 1024) > 1) {
                    imgSize = (Math.round(((imgSize / 1024) / 1024) * 100) / 100);
                    $('#divImageSize').find("#lblSize").html("file size is:- " + imgSize + "Gb");
                }
                else {
                    imgSize = (Math.round((imgSize / 1024) * 100) / 100)
                    $('#divImageSize').find("#lblSize").html("file size is:- " + imgSize + "Mb");
                }
            }
            else {
                imgSize = (Math.round(imgSize * 100) / 100)
                $('#divImageSize').find("#lblSize").html("file size is:- " + imgSize + "kb");
            }

            if (parseInt(actualByteSize) > 4000) {

                alert("Image size should not be more than 4 MB");
            }
        }
    </script>
</head>
<body>
    <div id="divImageSize">
        <label>Please select file :- </label>
        <input type="file" id="fileUpload" name="fileUpload" />
        <label id="lblSize" style="color: red; font-weight: bold"></label>
    </div>
</body>
</html>

Output


Explanation Image Size Jquery

Here i use the input type file for browse the file.And use the size property of file like this $('#divImageSize').find("input[name='fileUpload']")[0].files[0].size . Size return the uploaded file size in KB i customize it to get the size in MB or GB. You also fetch the height and width of image with the height and width property of image.
Its important because some where we have to set validation if image or file size greater than 4 MB then popup a alert .Hope this code will help you. If any issue then let me ask . You can get image size with only javascript scripting language.

0 comments:

Post a Comment