Get file size, image width and height before upload

Question

How can I get the file size, image height and width before upload to my website, with jQuery or JavaScript?

Answer 1

Multiple images upload with info data preview

Using HTML5 and the File API

Example using URL API

The images sources will be a URL representing the Blob object
<img src="blob:null/026cceb9-edr4-4281-babb-b56cbf759a3d">

const EL_browse  = document.getElementById('browse');  const EL_preview = document.getElementById('preview');    const readImage  = file => {    if ( !(/^image\/(png|jpe?g|gif)$/).test(file.type) )      return EL_preview.insertAdjacentHTML('beforeend', `Unsupported format ${file.type}: ${file.name}<br>`);      const img = new Image();    img.addEventListener('load', () => {      EL_preview.appendChild(img);      EL_preview.insertAdjacentHTML('beforeend', `<div>${file.name} ${img.width}×${img.height} ${file.type} ${Math.round(file.size/1024)}KB<div>`);      window.URL.revokeObjectURL(img.src); // Free some memory    });    img.src = window.URL.createObjectURL(file);  }    EL_browse.addEventListener('change', ev => {    EL_preview.innerHTML = ''; // Remove old images and data    const files = ev.target.files;    if (!files || !files[0]) return alert('File upload not supported');    [...files].forEach( readImage );  });

#preview img { max-height: 100px; }

<input id="browse" type="file" multiple>  <div id="preview"></div>

Example using FileReader API

In case you need images sources as long Base64 encoded data strings
<img src="data:image/png;base64,iVBORw0KGg... ...lF/++TkSuQmCC=">

const EL_browse  = document.getElementById('browse');  const EL_preview = document.getElementById('preview');    const readImage = file => {    if ( !(/^image\/(png|jpe?g|gif)$/).test(file.type) )      return EL_preview.insertAdjacentHTML('beforeend', `<div>Unsupported format ${file.type}: ${file.name}</div>`);      const reader = new FileReader();    reader.addEventListener('load', () => {      const img  = new Image();      img.addEventListener('load', () => {        EL_preview.appendChild(img);        EL_preview.insertAdjacentHTML('beforeend', `<div>${file.name} ${img.width}×${img.height} ${file.type} ${Math.round(file.size/1024)}KB</div>`);      });      img.src = reader.result;    });    reader.readAsDataURL(file);    };    EL_browse.addEventListener('change', ev => {    EL_preview.innerHTML = ''; // Clear Preview    const files = ev.target.files;    if (!files || !files[0]) return alert('File upload not supported');    [...files].forEach( readImage );  });

#preview img { max-height: 100px; }

<input id="browse" type="file"  multiple>  <div id="preview"></div>