Question

I have an upload form for an image. When user selects a file, I need to get the image width and height with js/jquery on the client side before upload.

I’m using this code to monitor when the user selects the image they want to upload from their local computer

$('#upload').change(function(){
   if($(this).val() != null){
      getImgSize(this);         
   }
});

and it calls this function, but it alerts that the width and height are 0

function getImgSize(imgSrc){
  var newImg = new Image();
  newImg.src = imgSrc;
  var height = newImg.height;
  var width = newImg.width;
  alert ('The image size is '+width+'*'+height);
}

and this is the html markup

<input name="upload" id="upload" type="file">

Answer 1

There is a rule, that a client side javascript code cannot reach out to the clients file system. Because of this, you cannot get the full path of the selected file, from the input. It would only return the name of the file, which is not enough for your plan to work.