上传图片前判断图片的尺寸

最新推荐文章于 2023-08-17 15:58:24 发布

chenshunlong

最新推荐文章于 2023-08-17 15:58:24 发布

阅读量991

点赞数

分类专栏： java前端

本文链接：https://blog.csdn.net/chenshunlong/article/details/52400237

版权

java前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="zh-CN">
<meta charset="UTF-8">
<title>双创平台后台管理系统</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

<meta name="renderer" content="webkit">

</head>

<body>
   <div style="position: relative;width: 370px;">
   <input type='text' name='textfield' id='textfield' class='txt' style="color:red;" value="图片规格为300*100" οnfοcus="this.value=''" οnblur="if(this.value==''){this.value='图片规格为300*100'}" />
   <input type="file" name="largeImg" class="file" id="fileField" size="28"οnchange="chartPicture(this.id)" />
   </div>
<script type="text/javascript">
   //上传图片之前判断上传的图片是否符合要求
   function chartPicture(fileObj){
       var img=new Image();
       var value = document.getElementById(fileObj);
       if (value.files && value.files[0]) {
           //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
           img.src = window.URL
                   .createObjectURL(value.files[0]);
       } else if(document.selection){
           //IE下，使用滤镜
           value.select();
           var imgSrc = document.selection.createRange().text;
           img.src=imgSrc;
       }
       //因为这里只有把图片添加到页面后才可获取其高和宽
       document.body.appendChild(img);
       img.onload = function(){
           alert(img.offsetWidth);
           alert(img.offsetHeight);
               img.style.display = 'none';

       };

   }
   </script>


</body>
</html>

chenshunlong

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
上传图片前判断图片的尺寸

双创平台后台管理系统之中添加 viewport元数据标签。 --> //上传图片之前判断上传的图片是否符合要求 function chartPicture(fileObj){ var img=new Image(); var value = docu
复制链接

扫一扫