How to Check Image Width, Height and Type before Upload Using JavaScript

Last updated: 27th May 2025

If your web application involves image uploads, ensuring proper validation is crucial for performance and security. In this guide, I'll show you a fast and efficient way to check the width, height and format of multiple images using plain JavaScript. No external libraries required. Improve user experience and maintain file integrity with these simple yet powerful techniques.

First, see this demo

👉 By the way, you can also do this using jQuery.

Along with image width, height and its format, I’ll show you how to check the file’s last modified date.

The Markup

I have an input box of type "file". I want to check multiple files at a time, therefore I have added the multiple attribute to the input type.

<html>
<body>
    <input type="file" id="file" multiple onchange="checkFileDetails()" accept="image/*" />
    <p id="fileInfo"></p>   <!--show images info here-->
</body>

I’ll check the details of the file(s) as soon as I select it. Therefore, I am using the onchange event to call a function to check the file details.

The Script

<script>
  function checkFileDetails() {
    const fi = document.getElementById('file');

    if (fi.files.length === 0) return; // Ensure a file is selected.

    Array.from(fi.files).forEach(file => {
      const fileName = file.name;
      const fileExtension = fileName.split('.').pop(); // Safer way to get extension.

      // Read image details using FileReader.
      readImageFile(file, fileExtension);
    });
  }

  function readImageFile(file, fileExtension) {
    const reader = new FileReader();

    reader.onload = (e) => {
      const img = new Image();
      img.src = e.target.result;

      img.onload = () => {
        const fileInfo = `
            <br />
            Name: <b>${file.name}</b> <br />
            File Extension: <b>${fileExtension}</b> <br />
            Size: <b>${Math.round(file.size / 1024)}</b> KB <br />
            Width: <b>${img.width}</b> <br />
            Height: <b>${img.height}</b> <br />
            Type: <b>${file.type}</b> <br />
            Last Modified: <b>${file.lastModifiedDate}</b> <br />
            `;

        document.getElementById('fileInfo').innerHTML += fileInfo;
      };
    };

    reader.readAsDataURL(file);
  }
</script>
</html>

Try it

First, I'll create a file object and iterate (or loop) through each file. To extract the file extension, I'll use the split('.') method followed by pop(), ensuring accuracy even for filenames with multiple dots.

Note: Using split('.').pop() is a simple and reliable way to extract the file extension from a filename in JavaScript. Using this method, I can handle multiple dots in Filenames (eg: my.image.file.png).

By using .split('.'), we break the filename into an array of its parts and .pop() ensures we always get the last element, which is the actual extension (png, jpg or bmp etc.).

See this demo

← PreviousNext →