从输入获取图像宽度和高度：文件多个

Question

我需要添加多个图像，并根据宽度和高度我需要显示它，但我无法获得所有图像的宽度和高度有时图像宽度和高度为0，但图像base64数据存在，所以我的图像做没有显示。我的HTML有，

<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);
         }
     }
});

问题是此代码始终无法正常工作。有时宽度和高度为零，而另一次的相同图像会得到宽度和高度。那么神话会发生什么？