Javascript can't get width of object image -

i have following code

var inputlocalfont = document.getelementbyid("image-input");     inputlocalfont.addeventlistener("change",previewimages,false);     function previewimages(){         var filelist = this.files;         var anywindow = window.url || window.webkiturl;              for(var = 0; < filelist.length; i++){               var objecturl = anywindow.createobjecturl(filelist[i]);                                 $('.preview-area').append('<img class="resizeme" id="myimage" height="150" src="' + objecturl + '" + title="' + filelist[i].name + ' ( ' + filelist[i] + ' "/>');               window.url.revokeobjecturl(filelist[i]);             }     } 

i can image name title code

filelist[i].name 

but when try add width , height in title image adding code

filelist[i].width filelist[i].height 

it's give "undefined" result

try using filelist[i].naturalwidth
, it's give same result

what i'm missing?

---

flow

i try created multiple image preview before user press submit , upload image server...i want every preview image has tooltip title contains (name, width, height)
success name in tooltip

filelist[i].name 

is possible width , height of image in tooltip title?

---

add event listener inside loop

var inputlocalimage = document.getelementbyid("image-input");     inputlocalimage.addeventlistener("change",previewimages,false);     function previewimages(){         var filelist = this.files;         var anywindow = window.url || window.webkiturl;              for(var = 0; < filelist.length; i++){               var objecturl = anywindow.createobjecturl(filelist[i]);                                  objecturl.addeventlistener("load", function() {                 alert('objecturl.width');                 })                $('.preview-area').append('<img class="resizeme" id="myimage" height="150" src="' + objecturl + '" + title="' + filelist[i].name + ' (s ' + filelist[i].clientwidth + ' "/>');               window.url.revokeobjecturl(filelist[i]);             }     } 

i try add event listener in
objecturl / filename[i]

with property
.width
.naturalwidth
.clientwidth

what i'm missing?

---

html

<div class="row">       <label for="image" class="control-label col-lg-3">image<span class="required">*</span></label>       <div class="col-lg-8">          <input type="file" class="dimmy" id="image-input" multiple />          <div class="preview-area"></div>       </div> </div> 

preview-area class container multiple image preview...i append code

$('.preview-area').append('<img class="resizeme" id="myimage" height="150" src="' + objecturl + '" + title="' + filelist[i].name + ' ( ' + filelist[i] + ' "/>'); 

see example: http://jsfiddle.net/kevalbhatt18/pjf3uffs/3/

note :in example don't have multiple image width , height when click on image

and changing width use inputlocalfont.style.width = '500px';

and getting name of image :

var name = inputlocalfont.src; var filename = name.split("/")[name.split("/").length-1]; 

---

var inputlocalfont = document.getelementbyid("image-input"); inputlocalfont.addeventlistener("click", previewimages, false);  function previewimages() {      var width = inputlocalfont.clientwidth;     var height = inputlocalfont.clientheight;     var name = inputlocalfont.src;     inputlocalfont.style.width = '500px';     alert("width:" + width + "height:" + height)     var filename = name.split("/")[name.split("/").length - 1];     console.log(filename) }