Input type file check image resolution using pure Javascript

Question

I have created a type=file input element

<input type="file" id="input-id" accept="image/jpg" onchange="verifyFileUpload(event)">

I need to check that the file resolution is aXb using pure Javascript. How can I do that in the verifyFileUpload(event) function?

Possible duplicate of stackoverflow.com/questions/8903854/… — clabe45
– clabe45, Commented Oct 3, 2018 at 12:25
This questions has lot of answers online, even on stack overflow, please consider doing a quick search before posting a question. also Possible duplicate stackoverflow.com/questions/12570834/… — Wasim Sayyed
– Wasim Sayyed, Commented Oct 3, 2018 at 12:32

Juan · Accepted Answer · 2019-07-12 08:27:06Z

10

Try the below way

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

function verifyFileUpload(e)
{
  var file = document.getElementById("input-id");
  
  if (file && file.files.length > 0) 
  {
        var img = new Image();

        img.src = window.URL.createObjectURL( file.files[0] );
        img.onload = function() 
        {
            var width = this.naturalWidth,
                height = this.naturalHeight;
                
          console.log ("Image Width: " + width);
          console.log ("Image Height: " +height);
        };
    }
}

<input type="file" id="input-id" accept="image/jpg" onchange="verifyFileUpload(event)">

edited Jul 12, 2019 at 8:27

Juan

155 bronze badges

answered Oct 3, 2018 at 12:28

Hary

5,8368 gold badges49 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Input type file check image resolution using pure Javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related