判断上传图片的尺寸和大小demo

最新推荐文章于 2023-09-08 13:27:07 发布

原创最新推荐文章于 2023-09-08 13:27:07 发布 · 911 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用JavaScript读取并显示用户上传图片的实际宽度、高度及文件大小的方法。通过FileReader API读取文件内容，并利用Image对象获取图片属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<input id="file" type="file">
<input id="Button1" type="button" value="button" onclick="check()">
<script>
window.check=function(){
var input = document.getElementById("file");
if(input.files){
//读取图片数据
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;
alert(width+'======'+height+"====="+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;
alert(width+'======'+height+"====="+fileSize);
}
image.src = input.value;
}
}
</script>