您的位置：首页 > Web前端 > JavaScript

JS图片判断其尺寸大小

2009-06-11 10:30 429 查看

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" onclick="checkForm(this)"
/></td></tr>

<table>

</form>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： extension function javascript input class button

相关文章推荐

新的分享

章节导航