JS图片判断其尺寸大小

最新推荐文章于 2021-07-28 11:53:04 发布
最新推荐文章于 2021-07-28 11:53:04 发布
阅读量1.9k 收藏
点赞数
分类专栏： .net项目的遇到的问题 文章标签： extension function javascript input class button
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/youaremy1bestlove/article/details/4259778
版权

 

2009-06-11 10:33:57

 

以前从网上找到一些判断图片的JS，但是有些BUG，下面是自己更改好的，不过还是有些细节方面的没有考虑，需要时再加吧！嘿嘿

JS代码：

<script language="javascript" type="text/javascript">        
            function $(objname)

       {

         return document.all[objname];

        }   
      //检查是否为图片         
          
      function  chkimg(imgurl)     
      { 

    var        img=null;

       // debugger;
      if (imgurl=="")
      return true ;
      var extension=new Array("pjpeg","gif","png","bmp","jpg","jpeg");
      var _fileExtension=imgurl.split('.')[imgurl.split('.').length-1].toLowerCase();
      isImage=false ;
      for (i=0;i<extension.length;i++)
      {
         if (_fileExtension==extension[i])
         {
         isImage=true ;
         }    
      }
      if (isImage!=true )
      {     
       alert('您上传的图片格式不正确！');
       return false ;     
      }      
      img=document.createElement("img");
      img.src=imgurl;
      
      img.setAttribute("id","img1");  

      img.setAttribute("h",img.height);//添加一个属性h,因为隐藏后图片的大小有时会成为0，所以先预存一下
      img.setAttribute("w",img.width);//添加一个属性w

//debugger;     
      //img.style.display="none";不知道你信不信，先为img1设置隐藏，有时图片宽和高取来时都为0

     //感兴趣的朋友可以试试看。 在方法isPassSize() 中 有时H和W有时都为0

   if ($("img1")=undefined)  
          {
              $("img1").parentElement.removeChild($("img1"));
          }
     document.body.appendChild(img); 
     $("img1").style.display="none"; //后隐藏

 


     }  


   function isPassSize()
            {
           
       if ($("img1")==undefined)
            return true ;           
     var height=0;
     var width=0;     
  
  
     height=$("img1").h;
     width=$("img1").w;
  
      if ((width>200)||(height>200))//文件尺寸200为自己定义尺寸，可以根据个人需要更改
      {
      alert("图宽和高不能大于200！");
      return false ;
      }    
      if($("img1").fileSize/1024>300)
      {//文件大小
      alert("您上传的图片不能大于300KB！"+"文件大小："+eval($("img1").fileSize/1024).toFixed(5))+"KB");
      return false ;
      }  
      $("img1").parentElement.removeChild($("img1"));
      return true ;
           
            }
          
             function checkForm(obj)

                        {

                         if (!isPassSize())

                              return ;//如果为false则终止

                             obj.disabled=true ;

                             form1.submit();

                       }
</script>

 

 

HTML代码：

<html>

<form id="form1" runat="server">

<table>
           <tr>
                  <td width="20px">
                  </td>
                  <td>
                        <table style="border-right: #cccccc thin solid; border-top: #cccccc thin solid; border-left:   #cccccc thin solid;  border-bottom: #cccccc thin solid;">

 

                              <tr>
                                  <td style="height: 26px" class="textfont">
                                    图像信息：</td>
                                  <td style="height: 26px">
                                      <input type="file" id="uphoto" runat="server" class="text"                  onpropertychange="chkimg(this.value)" />//当file属性改变时触发</td>
                            </tr>

                         </table>

</td></tr>

<tr><td colspan='2'><input type="button" value="OK" οnclick="checkForm(this)" /></td></tr>

<table>

</form>

</html>

 

 

 

miss味道
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS如何检测图片的大小
设计之家
08-21 1190
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 　　var maxSize=document.getElementByIdx_x('MAX_FILE_SIZE').value; function checkFileType(obj){ var path=ob
Javascript判断图片尺寸大小实例分析
10-25
通常我们判断js图片大小都是利用images对象，然后再用attr来获取图片地址再进行判断就可以了。这篇文章主要介绍了Javascript判断图片尺寸大小的实例,需要的朋友可以参考下
js 判断上传图片尺寸大小(var img =new Image())
在路上的小马达
08-11 4万+
上传时常常会碰到限制图片尺寸的需求，而在后台通过byte判断大小，虽可行，但如果在JS中判断显然是更好的选择，尤其是在不限制文件大小，只限制尺寸时。  通常会使用创建Image对象，或添加一个来获取， 1.img标签方式   function uploadFile() { var imgWidth =
使用JS实现HTML限定图像最大尺寸并等比例显示
huitoukest的专栏
04-16 2552
调用js函数，传入Jquery对象即可： function setImgAdaptContainer(imgSelector,containerSelector){ var _img=$(imgSelector); var container=$(containerSelector); setImgAdaptContainerByObj(_img,c
js获取图片原始比例并根据比例显示宽高
CloudEmperor
05-17 8993
由于每个图片上传的时候比例大小都不一样，如果要在移动端展示，统一宽高效果会非常差。所以我们可以获取图片的原始宽高，然后以移动的比例展示，效果会非常好。以下就是实现方法： //获取图片原始宽高 getNaturalImgSize: function(img, callback) { /** *img元素 *callback 回调函数 **/ va...
JS验证上传照片大小类型并显示预览
cxws110的博客
06-19 557
JS部分： //验证照片 function addIMG(file){ var filePath=file.value;//照片路径 var fileSize=file.files[0].size;//照片尺寸大小 var imgsize=fileSize/1024; var fileType=filePath.su...
js图片预览判断尺寸大小
10-05
很好的利用js技术实现对图片的预览，判断图片的大小，以及格式是否合法，里面是代码
高度,javascript判断上传图片大小，宽度，高度
06-27
在JavaScript中，对上传图片进行大小、宽度和高度的判断是一项常见的前端操作，尤其是在实现用户在网站上上传图片时需要预览和验证图片格式及尺寸的场景。以下是一些关于如何使用JavaScript进行这些判断的关键知识点...
js解决div内图片自适应大小
01-23
本文将深入探讨如何利用纯JavaScript实现img图片在大小未知的div内自适应显示，并兼容不同浏览器，包括火狐、谷歌和IE6/7/8。 首先，我们来看一下基本的HTML结构，它包含一个div容器和一个img元素： ```html `...
基于原生JS实现图片裁剪
10-21
基于原生JS实现图片裁剪是一种常见的前端图像处理技术，它涉及到JavaScript的事件处理、DOM操作以及坐标计算等多个方面。主要分为两个步骤：前端的裁剪区域选择和后台的处理。前端部分主要利用JavaScript监听鼠标...
js 判断图片尺寸
qq_42339350的博客
03-23 1370
利用img标签 注意 要在onload中拿宽高不然会是0 onload要写在src之前否则ie会报错 let img=document.createElement('img') img.onload=()=>{ alert(img.height) alert(img.width) } img.
图片上传js验证图片长宽_js判断图片上传时的文件大小，和宽高尺寸
weixin_39835178的博客
12-24 323
今天在做图片上传的小功能，使用了一个kissy上传组件。很好奇它是如何在图片上传前，检测到图片的大小和尺寸的？我们来写个小实例实现一下吧如何读取图片的size首先，原生input file控件有个files属性，该属性是一个数组。数组中的元素有以下属性：lastModifiedDate，name，size，type，webkitRelativePath，如图：这样的话，我们就可以检测到size：v...
js怎样判断图片链接是否有效
青崖梦
07-28 3077
1. 仅验证一张图片链接： function checkImgExists(imgurl) { return new Promise(function(resolve, reject) { var ImgObj = new Image(); ImgObj.src = imgurl; ImgObj.onload = function(res) { resolve(res); } ImgObj.onerror = func.
JavaScript获取图片(Image)的大小(宽度,高度)
Inner peace
05-13 4951
如果只有图片的URL [code="js"] function getImageDimensions(imgStyleRule) { var defaultSize, img; defaultSize = { width: 10, height: 30 }; if (!imgStyleRule || !imgStyleRule.style || !i...
隐藏的iframe加载的页面获取宽高为0问题
weixin_42776979的博客
10-31 3462
由于初始化的时候有些iframe是隐藏的，当iframe被置为显示的时候，内部加载页面获取宽高为空。 由于无法获取宽高我们就没有办法根据页面宽高初始化图表元素。 有的版本浏览器只要代码初始化iframe不是隐藏，使用js隐藏的 也是没有问题。 解决问题思路： 1、判断图表所在页面宽高，小于等于0的时候，出一个固定的初始化值。 这样可以解决问题，但是 每一个页面都要加判断。 $(fu...
js在上传图片前判断大小
tiao321的专栏
03-26 774
这个可以用javascript实现,效果还可以,主要是因为javascript里居然有Image对象,可以取得其属性 var ImgObj=new Image();   //建立一个图像对象 var AllImgExt=".jpg|.jpeg|.gif|.bmp|.png|"//全部图片格式类型 var FileObj,ImgFileSize,ImgWidth,ImgHeight,F
JS获取图片的原始尺寸
weixin_34025151的博客
08-21 227
一、html5 中新的naturalWidth和naturalHeight属性 在HTML 5中，新增加了两个用来判断图片的宽度和高度的属性，分别为naturalWidth 和 naturalHeight属性， 例子如下： var rw = myimage.naturalWidth; // 真实图片宽度 var rh = myimage.naturalHeight; //真实图片高度...
js获取上传图片真实的尺寸大小和存储大小
热门推荐
奇幻屋的专栏
10-21 5万+
</pre><pre name="code" class="html"><input id="file" type="file"> <input id="Button1" type="button" value="button" onclick="check()"> <script> window.check=function(){ v...
微信小程序怎么用js函数压缩图片到指定大小
最新发布
05-27
// 判断图片文件大小是否小于等于最大文件大小 wx.getFileSystemManager().readFile({ filePath: res.tempFilePath, success(res) { const fileSize = res.data.byteLength / 1024; // 文件大小，单位为 KB if...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值