<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>