js验证图片格式

1.采用硬编码的写法:

   <script language="javascript" type="text/javascript">
       function checkForm(){
   
    var filepath = document.getElementById("imagepath").value;
      if(filepath==""){
    alert("请选择上传的文件!");
       return false;
    }
    var extname = filepath.substring(filepath.lastIndexOf(".")+1,filepath.length);
   extname = extname.toLowerCase();//处理了大小写
    if(extname!= "bmp"&&extname!= "jpg"&&extname!= "gif"){
     alert("只能上传bmp,jpg,gif格式的图片!");
     return false;
    }
   }
</script>

2.很实用的方法

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>
function checkurl()
{
var passfix= new Array("jpg","gif","png","jpeg");
var strs=document.getElementById("upload");
var pattern = /^[\u4e00-\u9fa5]+$/;
var maxsize=4;
with(strs)     //用js 的 with
{
    var filename = value.substring(value.lastIndexOf('\\')+1,value.lastIndexOf('.'));
    var size=getfilesize(value);
    var sign = false;
    if(filename==null||filename=="")
    {
     alert("请选择您要上传的文件!");
     return false;
    }
    if(pattern.test(filename))

//正则表达式验证不能有中文,但是 c:\测试\a.gif是允许的。(正则写的不是很好,可以上网自己查下!)
    {
     alert("文件名不能包含中文字符!");
     return false;
    }   
    fix=value.substring(value.lastIndexOf('.')+1,value.length).toLowerCase();
    for(var i=0;i<passfix.length;i++)
    {
     if(passfix[i]==fix)
     {
      sign=true;
      break;
     }
    }
   if(!sign)
   {
    alert(fix+"为不允许上传的类型!正确类型包括(jpg,gif,png,jpeg)");
    return false;
   }
  
   if(size==0)
   {
    alert("文件:("+value+") 属于空文件,不允许上传!");
    return false;
   }
   if(size>maxsize)
   {
    alert("文件:("+name+"."+fix+")太大,最大上传大小为:"+maxsize/1024+"M");
    return false;
   }
}
return true;
}
function getfilesize(url)
{
   var image=new Image();  
   image.dynsrc=url;  
   return image.fileSize;
}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="" onsubmit="return checkurl();">
<table width="100%" border="1">
    <tr>
      <td width="55">上传文件</td>
      <td width="79%"><label>
        <input type="file" name="upload" id="upload" size="30"/>
      </label></td>
    </tr>
    <tr>
      <td> </td>
      <td><label>
        <input type="submit" name="Submit" value="提交" />
      </label></td>
    </tr>
</table>
</form>
</body>
</html>
3.纯正则表达式的方式

var patn = /\.jpg$|\.jpeg$|\.gif$|\.png$/i;
var allowString ="jpg,jpeg,gif,png";
var wbproimage = formname.wbproimage.value;

    if(wbproimage!="")
    {
        var index = wbproimage.lastIndexOf("\\");
        var filename=wbproimage.substr(index + 1);
        if(ischinesename(filename))
        {
            alert("图片文件名称中不能包含中文");
            return false;
        }
        if(!patn.test(filename))
        {
            alert("图片格式不正确,只能上传以下图片格式:"+allowString);
            return false;
        }
    }

原文地址:https://www.cnblogs.com/y0umer/p/2809622.html