简体   繁体   中英

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

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

 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> 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM