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

User · Accepted Answer

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

_x000D_

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

_x000D_

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

_x000D_

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

_x000D_

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=">

_x000D_

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

_x000D_

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

_x000D_

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

_x000D_

User · Answer

If you can use the jQuery validation plugin you can do it like so   Html    lt input type  file  name  photo  id  photoInput    gt    JavaScript     validator addMethod  imagedim   function value  element  param      var  URL   window URL          var  img          if   element   this files 0                  img   new Image                img onload   function                      console log  Width     this width       Height      this height    this will give you image width and height and you can easily validate here                      return this width  gt   param                            img src    URL createObjectURL element                   The function is passed as ab onload function   The code is taken from here

User · Answer

So I started experimenting with the different things that FileReader API had to offer and could create an IMG tag with a DATA URL   Drawback  It doesn t work on mobile phones  but it works fine on Google Chrome    x000D   x000D     input   change function     x000D       x000D      var fr   new FileReader  x000D       x000D      fr onload   function     x000D          var img   new Image  x000D           x000D          img onload   function      x000D    I loaded the image and have complete control over all attributes  like width and src  which is the purpose of filereader  x000D                ajax  url  img src  async  false  success  function result   x000D                    result   html  READING IMAGE  PLEASE WAIT      x000D                    result   html   lt img src      img src        gt     x000D                  console log  Finished reading Image    x000D                 x000D             x000D           x000D          img src   fr result  x000D         x000D       x000D      fr readAsDataURL this files 0    x000D       x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt input type  file  accept  image    capture  camera  gt  x000D   lt div id  result  gt Please choose a file to view it   lt br  gt  Tested successfully on Chrome - 100  SUCCESS RATE  lt  div gt  x000D   x000D   x000D     see this on a jsfiddle at http   jsfiddle net eD2Ez 530     see the original jsfiddle that i added upon to at http   jsfiddle net eD2Ez

User · Answer

Here is a pure JavaScript example of picking an image file  displaying it  looping through the image properties  and then re-sizing the image from the canvas into an IMG tag and explicitly setting the re-sized image type to jpeg   If you right click the top image  in the canvas tag  and choose Save File As  it will default to a PNG format   If you right click  and Save File as the lower image  it will default to a JPEG format   Any file over 400px in width is reduced to 400px in width  and a height proportional to the original file   HTML   lt form class  frmUpload  gt     lt input name  picOneUpload  type  file  accept  image    onchange  picUpload this files 0     gt   lt  form gt    lt canvas id  cnvsForFormat  width  400  height  266  style  border 1px solid  c3c3c3  gt  lt  canvas gt   lt div id  allImgProperties  style  display inline  gt  lt  div gt    lt div id  imgTwoForJPG  gt  lt  div gt    SCRIPT   lt script gt   window picUpload   function frmData      console log  picUpload ran      frmData    var allObjtProperties       for  objProprty in frmData        console log objProprty           frmData objProprty        allObjtProperties   allObjtProperties     lt span gt     objProprty          frmData objProprty        lt  span gt        document getElementById  allImgProperties   innerHTML   allObjtProperties   var cnvs document getElementById  cnvsForFormat    console log  cnvs      cnvs   var ctx cnvs getContext  2d     var img   new Image  img src   URL createObjectURL frmData    console log  img      img    img onload   function       var picWidth   this width    var picHeight   this height     var wdthHghtRatio   picHeight picWidth    console log  wdthHghtRatio      wdthHghtRatio      if  Number picWidth   gt  400        var newHeight   Math round Number 400    wdthHghtRatio       else       return false            document getElementById  cnvsForFormat   height   newHeight      console log  width  400  h      newHeight         You must change the width and height settings in order to decrease the image size  but       it needs to be proportional to the original dimensions      console log  This is BEFORE the DRAW IMAGE        ctx drawImage img 0 0  400  newHeight        console log  THIS IS AFTER THE DRAW IMAGE            Even if original image is jpeg  getting data out of the canvas will default to png if not specified     var canvasToDtaUrl   cnvs toDataURL  image jpeg          The type and size of the image in this new IMG tag will be JPEG  and possibly much smaller in size     document getElementById  imgTwoForJPG   innerHTML     lt img src      canvasToDtaUrl      gt            lt  script gt    Here is a jsFiddle   jsFiddle Pick  display  get properties  and Re-size an image file  In jsFiddle  right clicking the top image  which is a canvas  won t give you the same save options as right clicking the bottom image in an IMG tag

User · Answer

Demo  Not sure if it is what you want  but just simple example   var input   document getElementById  input     input addEventListener  change   function         var file    this files 0       var img   new Image         img onload   function             var sizes                 width this width              height  this height                    URL revokeObjectURL this src            console log  onload  sizes   sizes           console log  onload  this   this              var objectURL   URL createObjectURL file        console log  change  file   file       console log  change  objectURL   objectURL       img src   objectURL

User · Answer

A working jQuery validate example        function                 input type file    on  change   function                 var  el     this               var files   this files              var image   new Image                image onload   function                      el                      attr  data-upload-width   this naturalWidth                       attr  data-upload-height   this naturalHeight                              image src   URL createObjectURL files 0                         jQuery validator unobtrusive adapters add  imageminwidth     imageminwidth    function  options                var params                     imageminwidth  options params imageminwidth split                                  options rules  imageminwidth     params              if  options message                    options messages  imageminwidth     options message                                     jQuery validator addMethod  imageminwidth   function  value  element  param                var  el     element               if  element files  amp  amp  element files 0   return true              return parseInt  el attr  data-upload-width     gt    parseInt param  imageminwidth   0                        jQuery

User · Answer

As far as I know there is not an easy way to do this since Javascript JQuery does not have access to the local filesystem  There are some new features in html 5 that allows you to check certain meta data such as file size but I m not sure if you can actually get the image dimensions   Here is an article I found regarding the html 5 features  and a work around for IE that involves using an ActiveX control  http   jquerybyexample blogspot com 2012 03 how-to-check-file-size-before-uploading html

[javascript] Get file size, image width and height before upload

Multiple images upload with info data preview

Example using URL API

Example using FileReader API

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to dimensions

Examples related to image-size