getting image width and height during upload javascript

Question

Im having trouble obtaining the width and height of an image during the upload function.

Here's the current code I have:

// internal function that creates an input element
var file=newElement("input",0,"");

// sets the input element as type file
file.type="file";
file.multiple="multiple";
file.name="photoupload[]";
file.accept="image/*";

file.onchange=function(e){
  // internal function that creates an image element
  var img=newElement("img",0,"");
  img.src=URL.createObjectURL(this);
  img.onload=function(){
   var cw=img.clientWidth;
   var ch=img.clientHeight;
   alert(cw);alert(ch);
  }
}
file.click();

Not quite sure how to fix this. Any help appreciated.

mplungjan · Accepted Answer · 2017-09-28 20:44:25Z

1

Swap the onload to before the change of src and use width and height.

The onload needs to exist before the src is changed

I assume newElement is a function that does a document.createElement - if it does not return an image object, you need to move the onload to that function

// internal function that creates an input element
var file=newElement("input",0,"");

// sets the input element as type file
file.type="file";
file.multiple="multiple";
file.name="photoupload[]";
file.accept="image/*";

file.onchange=function(e){
  // internal function that creates an image element
  var img=newElement("img",0,"");
  img.onload=function(){
   var cw=img.width;
   var ch=img.height;
   console.log(cw,ch);
  }
  img.src=URL.createObjectURL(this);
}
file.click();

answered Sep 28, 2017 at 20:44

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

getting image width and height during upload javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related