getting image width and height from input:files multiple

Question

I need to add multiple images and based on width and height i need to display it, But i cannot get width and height for all images sometimes image width and height are 0, but the image base64 data exist, so my image does not shown.My Html has,

<input type=file name='images' id='img_file" multiple data-ref=0;/>
<div id='area'>
</div>

Js

$('#img_file').change(function(){
    files = $(this).files;
    current = $(this).data('ref');
    for(i=0;i<files.length;i++) {
        if(files[i]){
            var reader = new FileReader();
            reader.onload = function(event)
            {
                var data = event.target.result;
                var image = document.createElement("img");
                var img = new Image();
                img.src = data;
                console.log('w'+img.width+':h'+img.height);
                image.src = data;
                image.width = img.width;
                image.height = img.height;
                document.getElementById('area').appendChild(image);
             }
             reader.readAsDataURL(file);
         }
     }
});

The problem is this code not working correctly all the time. Some times the width and height is zero and the same image in another times gets width and height.so what myth happens?