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

Last updated: 20th August 2026

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.

👉 Check your image's EXIF Metadata. EXIF (Exchangeable Image File Format) metadata is hidden information stored inside digital images that contains details about how, when, and where a photo was created, its GPS location, camera settings, copyright info etc. No programming required.

Learn more about EXIF Metadata.

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.

<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.

Trim images to focus on the most important parts: Crop an image without losing its Quality

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>

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 →