zoukankan      html  css  js  c++  java
  • 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;
            }
        }
    

  • 相关阅读:
    vs2005视频教程 之 文件管理系统(一)视频教程[视频]
    空间不够了,郁闷!
    一些web开发中常用的、做成cs文件的js代码 搜刮来的
    电子科大实训感想
    深入继承 抽象类和接口
    vs2005视频教程 之 自定义服务器控件(下) [视频]
    vs2005视频教程 之 文件管理系统(二)视频教程[视频]
    功能超强的用户管理系统数据库结构
    vs2005视频教程 之 抽象类和接口 三 [视频]
    vs2005入门 .Net2.0视频教程 之 创建读取文本文件[视频]
  • 原文地址:https://www.cnblogs.com/y0umer/p/2809622.html
Copyright © 2011-2022 走看看