图片上传时，图片类型、尺寸及大小的校验[转载]

最新推荐文章于 2024-06-10 18:16:43 发布

lita0916

最新推荐文章于 2024-06-10 18:16:43 发布

阅读量579

点赞数

分类专栏： JavaScript 文章标签： function file

本文链接：https://blog.csdn.net/lita0916/article/details/3313010

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>图片上传时，图片类型、尺寸及大小的校验</title>
</head>
<body style="font-family:Arial, sans-serif; ">
        <h3 align=center>图片类型：gif、jpg、jpeg、png、bmp</h3>
    <hr color=red>
    <form >
         <table align=center>
            <tr>
                <td>
                图片大小限制（单位：Kb）：
            </td>
            <td>
                <input type="text" size="4" value="100" name="fileSizeLimit" id="fileSizeLimit" />K
            </td>
        </tr>
        <tr>
            <td>
                图片高度限制（单位：像素）：
            </td>
            <td>
                <input type="text" size="4" value="100" name="heightLimit" id="heightLimit" />
            </td>
        </tr>
        <tr>
            <td>
                 图片宽度限制（单位：像素）：
            </td>
            <td>
                <input type="text" size="4" value="100" name="widthLimit" id="widthLimit" />
            </td>
        </tr>
        <tr>
            <td>
                选择上传文件
            </td>
            <td>
             <input type="file" name="photo" onchange="changeSrc(this)" />
            </td>
        
        </tr>
        <tr>
            <td>
                 图片预览：
            </td>
            <td>
            <img id="fileChecker" name="fileChecker" alt="test" />
            </td>
        </tr>
        <tr>
            <td colspan=2 align=center>
                <input type="submit" value="检 查">
            </td>
        </tr>
      </table>
    </form>
    
        <script type="text/javascript">
    
          //符合条件的图片格式的数组
          var right_type=new Array(".gif",".jpg",".jpeg",".png",".bmp");
                
                //图片预览组件
          var oFileChecker = document.getElementById("fileChecker");
    
        //检查图片大小
      function   CheckFileSize()   
      { 
        var limit = document.getElementById("fileSizeLimit").value * 1024;
        var width = document.getElementById("widthLimit").value ;
        var height = document.getElementById("heightLimit").value;
     
        if (oFileChecker.fileSize > limit)
        {
            alert("图片大小："+oFileChecker.fileSize+"byte--太大！");
        }
        else
        {
            alert("图片大小："+oFileChecker.fileSize+"byte--ok！");
        }
     
        if(  oFileChecker.height> height)
        {
            alert("图片高度："+oFileChecker.height+"--太高！");
        }
        else
        {
            alert("图片高度："+oFileChecker.height+"--ok！");
        }
        if(oFileChecker.width> width)
        {
            alert("图片宽度："+oFileChecker.width+"--太宽！");
        }
        else
        {
            alert("图片宽度："+oFileChecker.width+"--ok！");
        }
            return false;   
      } 
     
         //file组件onchange事件处理器
     function changeSrc(filePicker)
     { 
        if(!checkImgType(filePicker.value))
        {
            alert("图片格式不正确！");
            return;
        }
        oFileChecker.src = filePicker.value;
     }
    oFileChecker.onreadystatechange = function ()
    { 
        if (oFileChecker.readyState == "complete")
        {
            CheckFileSize();
        }
    }
        //图片类型检查函数
    function checkImgType(fileURL)
    {
        var right_typeright_typeLen=right_type.length;
        var imgUrl=fileURL.toLowerCase();
        var postfixLen=imgUrl.length;
        var len4=imgUrl.substring(postfixLen-4,postfixLen);
        var len5=imgUrl.substring(postfixLen-5,postfixLen);
        for (i=0;i<right_typeLen;i++)
        {
            if((len4==right_type[i])||(len5==right_type[i]))
            {
                return true;
            }
        }
    }
  </script>
</body>
</html>
 