js验证图片格式

简介: 1.采用硬编码的写法: function checkForm(){ var filepath = document.getElementById("imagepath").
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;
        }
    }

目录
相关文章
|
2月前
|
JSON 算法 安全
Nest.js JWT 验证授权管理
Nest.js JWT 验证授权管理
96 3
Nest.js JWT 验证授权管理
|
2月前
egg.js 24.18参数验证
egg.js 24.18参数验证
49 0
egg.js 24.18参数验证
|
2月前
|
存储 JavaScript 前端开发
账号登录验证(原生js,本地存储)
账号登录验证(原生js,本地存储)
33 0
|
2月前
|
JavaScript 前端开发 UED
JavaScript中的输入验证与处理
JavaScript中的输入验证与处理
|
2月前
|
JavaScript 数据安全/隐私保护
JS正则验证密码
JS正则验证密码
44 0
|
11天前
|
JavaScript 前端开发 Java
|
12天前
|
移动开发 JavaScript
thinkPHP5.0开发微信H5页面分享接口signature验证失败,signature与微信 JS 接口签名校验工具返回结果不一致
thinkPHP5.0开发微信H5页面分享接口signature验证失败,signature与微信 JS 接口签名校验工具返回结果不一致
23 0
|
23天前
|
前端开发 JavaScript
阿里云验证码2.0 验证时报错 前端页面获取的验证参数有问题,动态JS加载失败,请问怎么解决啊?急,急,急。
用户反馈校验时遇到错误,日志显示验证码参数获取异常。采用无痕验证,失败后,返回`{captchaResult:false,bizResult:false}`,未触发滑块二次验证。
|
8月前
|
JavaScript 数据安全/隐私保护
js 常用类型验证
js 常用类型验证
69 0
|
2月前
|
JavaScript 前端开发 PHP
34、文件上传 -- 绕过JS验证
34、文件上传 -- 绕过JS验证
41 0