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

本文介绍了一种使用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>  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值