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 · 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_

$('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("<img src='" + img.src + "' />");_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_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<input type="file" accept="image/*" capture="camera">_x000D_
<div id='result'>Please choose a file to view it. <br/>(Tested successfully on Chrome - 100% SUCCESS RATE)</div>

_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

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

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

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

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  lt img src  blob null 026cceb9-edr4-4281-babb-b56cbf759a3d  gt    x000D   x000D  const EL browse    document getElementById  browse    x000D  const EL preview   document getElementById  preview    x000D   x000D  const readImage    file   gt    x000D    if       image   png jpe g gif     test file type    x000D      return EL preview insertAdjacentHTML  beforeend    Unsupported format   file type     file name  lt br gt     x000D   x000D    const img   new Image    x000D    img addEventListener  load        gt    x000D      EL preview appendChild img   x000D      EL preview insertAdjacentHTML  beforeend     lt div gt   file name    img width     img height    file type    Math round file size 1024  KB lt div gt     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   gt    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   lt input id  browse  type  file  multiple gt  x000D   lt div id  preview  gt  lt  div gt  x000D   x000D   x000D    Example using FileReader API  In case you need images sources as long Base64 encoded data strings  lt img src  data image png base64 iVBORw0KGg           lF   TkSuQmCC   gt    x000D   x000D  const EL browse    document getElementById  browse    x000D  const EL preview   document getElementById  preview    x000D   x000D  const readImage   file   gt    x000D    if       image   png jpe g gif     test file type    x000D      return EL preview insertAdjacentHTML  beforeend     lt div gt Unsupported format   file type     file name  lt  div gt     x000D   x000D    const reader   new FileReader    x000D    reader addEventListener  load        gt    x000D      const img    new Image    x000D      img addEventListener  load        gt    x000D        EL preview appendChild img   x000D        EL preview insertAdjacentHTML  beforeend     lt div gt   file name    img width     img height    file type    Math round file size 1024  KB lt  div gt     x000D          x000D      img src   reader result  x000D        x000D    reader readAsDataURL file     x000D     x000D   x000D  EL browse addEventListener  change   ev   gt    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   lt input id  browse  type  file   multiple gt  x000D   lt div id  preview  gt  lt  div gt  x000D     x000D   x000D   x000D

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

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

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

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to dimensions

Examples related to image-size