js获取上传图片真实的尺寸大小和存储大小

<img src="images/img_upload.png" alt="" id="imgUpload">

<input type="file" class="poster_sub pa" accept="image/*" id="img_file" onchange="showPicture(this);">

<script type="text/javascript">

//更改图片
function showPicture(imgFile){
    //把上传的图片显示到 id="imgUpload" 里面
    document.getElementById("imgUpload").src = window.URL.createObjectURL(imgFile.files[0]);

    //获取上传图片的高宽大小
    var input = document.getElementById("img_file");
    if(input){
        //读取图片数据
        var f = input.files[0];
        var reader = new FileReader();
        reader.onload = function (e) {
            var data = e.target.result;
            //加载图片获取图片真实宽度和高度
            var image = new Image();
            image.onload=function(){
                var width = image.width;
                var height = image.height;
                console.log('width='+width+',height='+height+",file_size="+f.size);
            };
            image.src= data;
        };
        reader.readAsDataURL(f);
    }else{
        var image = new Image();
        image.onload =function(){
            var width = image.width;
            var height = image.height;
            var fileSize = image.fileSize;
            console.log('width='+width+',height='+height+",file_size="+fileSize);
        };
        image.src = input.value;
    }
}

</script>