Javascript get the image width, height and video's resolution

Question

Here is my code:

if($('#profileimg').val())
    {
        var fsize = $('#profileimg')[0].files[0].size; //get file size
        var ftype = $('#profileimg')[0].files[0].type; // get file type
        if(fsize>5242880) 
        {
            $("#filetype").html("<b> Profile Image "+bytesToSize(fsize) +"</b>  <br />File is too big, it should be less than 5 MB.");
            return false
        }
        if(filetypeimage(ftype))
        {
            var file, img;
        if ((file = $('#profileimg')[0])) {
        img = new Image();
        img.onload = function() {
            alert(this.width + " " + this.height);
        };
        img.onerror = function() {
            alert( "not a valid file: " + file.type);
        };
        img.src = _URL.createObjectURL(file);


        }

I want to get the image width and height and also i want to get the resolution of video which is going to be uploaded on our server.

Thanks in advance

@Div Question is quite clear i want to get the width and height of the image, image dimension's? — Talha Aslam, Aug 14 '16 at 13:36
[See this](http://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript) — Divyang Desai, Aug 14 '16 at 13:44
@Div no it's bit different i am using and on form submit want to validate it's dimension's — Talha Aslam, Aug 14 '16 at 13:47

score 0 · Answer 1 · answered Aug 14 '16 at 15:39

window.URL = window.URL || window.webkitURL;


$('#submit').on('click',function(e){
    e.preventDefault(); 
    var fileInput = $('#file')[0],
        file = fileInput.files && fileInput.files[0];

    if( file ) {
        var img = new Image();
        img.src = window.URL.createObjectURL( file );
        img.onload = function() {
            var width = img.naturalWidth,
                height = img.naturalHeight;

            window.URL.revokeObjectURL( img.src );
            alert(width +" "+  height);
        };
    }    

});


// you can validate on file change also
$("#file").change(function(e) {
    var file, img;

    if ((file = this.files[0])) {        
        img = new Image();
        console.log(this);
        img.onload = function() {
            alert(this.width + " " + this.height);
        };
        img.onerror = function() {
            alert( "not a valid file: " + file.type);
        };
        img.src = window.URL.createObjectURL(file);

    }
});

<!DOCTYPE html>
<html>
<body>
<form action="#" method="post">
    <input type="file" id="file" />
    <input type="submit" id="submit" />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>

Javascript get the image width, height and video's resolution

1 Answers1