`

JavaScript 验证上传图片(长宽,大小,格式)

阅读更多
<!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>    
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />    
  <title>无标题文档</title>    
  <script>    
      UpLoadFileCheck=function()    
      {      
          this.AllowExt=".jpg,.gif,.bmp,.png";//允许上传的文件类型 0为无限制    
          this.AllowImgFileSize=0;//允许上传文件的大小 0为无限制 单位:KB    
          this.AllowImgWidth=300;//允许上传的图片的宽度 0为无限制 单位:px    
          this.AllowImgHeight=300;//允许上传的图片的高度 0为无限制 单位:px    
          this.ImgObj=new Image();    
          this.ImgFileSize=0;    
          this.ImgWidth=0;    
          this.ImgHeight=0;    
          this.FileExt="";    
          this.ErrMsg="";    
          this.IsImg=false;    
        
      }    
  
      UpLoadFileCheck.prototype.CheckExt=function(obj)    
      {    
          this.ErrMsg="";    
          this.ImgObj.src=obj.value;      
          if(obj.value=="")    
          {    
              this.ErrMsg="\n请选择一个文件";        
          }    
          else    
          {      
              this.FileExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();    
              if(this.AllowExt!=0&&this.AllowExt.indexOf(this.FileExt)==-1)    
              {    
                  this.ErrMsg="\n该文件类型不允许上传";      
              }    
          }    
          if(this.ErrMsg!="")    
          {    
              this.ShowMsg(this.ErrMsg,false);    
              return false;    
          }    
          else      
              return this.CheckProperty(obj);        
      }    
  
      UpLoadFileCheck.prototype.CheckProperty=function(obj)    
      {            
          if(this.IsImg==true)    
          {    
              thisthis.ImgWidth=this.ImgObj.width;    
              thisthis.ImgHeight=this.ImgObj.height;    
              if(this.AllowImgWidth!=0&&this.AllowImgWidth<this.ImgWidth)    
                  thisthis.ErrMsg=this.ErrMsg+"\n图片宽度超过限制。请上传宽度小于"+this.AllowImgWidth+"px的文件";    
  
              if(this.AllowImgHeight!=0&&this.AllowImgHeight<this.ImgHeight)    
                  thisthis.ErrMsg=this.ErrMsg+"\n图片高度超过限制。请上传高度小于"+this.AllowImgHeight+"px的文件";      
          }    
  
          this.ImgFileSize=Math.round(this.ImgObj.fileSize/1024*100)/100;    
          if(this.AllowImgFileSize!=0&&this.AllowImgFileSize<this.ImgFileSize)    
              thisthis.ErrMsg=this.ErrMsg+"\n文件大小超过限制。请上传小于"+this.AllowImgFileSize+"KB的文件";    
  
          if(this.ErrMsg!="")    
          {    
              this.ShowMsg(this.ErrMsg,false);    
              return false;    
          }    
          else    
              return true;    
      }    
  
      UpLoadFileCheck.prototype.ShowMsg=function(msg,tf)    
      {    
          alert(msg);    
      }    
        
      function c(obj)    
      {    
          var d=new UpLoadFileCheck();    
          d.IsImg=true;    
          d.AllowImgFileSize=100;    
          d.CheckExt(obj)    
      }    
  </script>    
</head>    
<body>    
  <input name="" type="file"   onchange="c(this)"/>    
</body>    
</html>  
分享到:
评论
1 楼 qq642617822 2011-01-04  
建议如果验证不通过时,选择图片的文本框内容清空。

相关推荐

    js验证上传图片 大小 格式

    在IT领域,特别是前端开发中,JavaScript(JS)被广泛应用于网页交互与数据验证,其中对上传图片的大小和格式进行验证是常见的需求之一。本文将深入解析如何使用JavaScript进行图片上传前的验证,包括检查图片格式、...

    javascript验证日期格式

    其中,日期格式验证是JavaScript中一个常见且实用的功能,它可以帮助开发者确保用户输入的日期符合预设的格式,从而避免数据处理中的错误。本文将深入探讨如何使用JavaScript来验证日期格式,理解其工作原理,并分析...

    Javascript验证上传图片大小[前台处理]_.docx

    在进行图片上传功能时,确保图片大小的验证是非常重要的安全措施。这有助于防止用户上传过大的文件,从而避免服务器资源的过度消耗,提高网站性能,以及优化用户体验。本文主要讨论了两种图片大小验证方法:后台处理...

    高度,javascript判断上传图片大小,宽度,高度

    在JavaScript中,对上传图片进行大小、宽度和高度的判断是一项常见的前端操作,尤其是在实现用户在网站上上传图片时需要预览和验证图片格式及尺寸的场景。以下是一些关于如何使用JavaScript进行这些判断的关键知识点...

    支持图片上传及实时显示,可设置显示图片的大小。由php、Ajax、javascript开发

    这个项目是用PHP、Ajax和JavaScript这三种技术实现的,允许用户上传图片并即时预览,同时还可以调整显示的图片大小。接下来,我们将深入探讨这些技术以及它们在实现此功能中的角色。 **PHP** 是一种广泛使用的...

    JavaScript验证用户登录

    JavaScript验证用户登录 JavaScript验证用户登录 JavaScript验证用户登录

    javascript之validate验证脚本

    3. **正则表达式**:正则表达式是进行复杂数据格式验证的强大工具,例如检查电子邮件格式、电话号码格式、日期格式等。JavaScript的`test()`方法可以用来匹配字符串是否符合特定的正则模式。 4. **自定义验证函数**...

    php+javascript批量上传图片

    使用 JavaScript,可以实现在客户端验证图片的上传格式、大小等信息,从而减少服务器的负载。此外,JavaScript 也可以用于实现上传图片的进度条、上传按钮等交互式功能。 HTML、CSS 和 JavaScript 的结合使用是实现...

    JavaScript客户端验证和页面特效制作(JavaScript)

    通过学习JavaScript,你可以掌握如何创建自定义验证规则,例如检查电子邮件格式、验证密码强度,以及确保必填字段不为空等。 页面特效制作则是JavaScript的另一大亮点,它可以极大地提升网页的视觉吸引力和互动性。...

    JavaScript验证——邮箱验证

    ### JavaScript邮箱格式验证详解 #### 一、引言 在Web开发中,用户输入的数据往往需要进行严格的格式验证,以确保数据的有效性和安全性。其中,邮箱验证是非常常见且重要的一个环节。通过JavaScript来实现邮箱验证...

    javascript验证表单大全

    JavaScript提供了一种便捷的方式来进行实时验证,如检查空字段、邮箱格式、电话号码格式等。 二、基本的JavaScript验证函数 1. `required`:检查字段是否为空,通常配合HTML5的`&lt;input required&gt;`属性使用。 2. `...

    js 图片上传前大小长宽验证代码

    ### js 图片上传前大小长宽验证知识点 #### 1. 图片预览与信息获取 在进行图片上传前,需要实现图片的预览以及获取图片的尺寸信息。在JavaScript中,可以通过创建一个`Image`对象来实现。实例化一个`Image`对象后,...

    javascript表单验证 正则表达式验证表单

    比较实用的javascript做的表单验证,验证的表单域包括用户名、密码、密码...表单域基本通过获得焦点显示提示信息,失去焦点进行验证,还有提交表单验证。提交表单先进行必填项不能为空验证,再进行正则表达式匹配验证。

    基于JavaScript的表单验证.zip

    在网页开发中,表单验证是一项至关重要的任务,它确保用户输入的数据符合预期的格式和规则,从而提高用户体验并减少服务器端的压力。本资源"基于JavaScript的表单验证.zip"提供了一种使用JavaScript进行表单验证的...

    Javascript验证上传图片大小[前台处理]

    后台处理指的是服务器端在图片上传后进行大小的检查,而前台处理则是在图片上传到服务器之前,通过客户端的JavaScript代码对图片大小进行验证。 首先,前台处理有其显著的优势,主要表现在用户体验上。如果上传的...

    javascript常用验证方法

    根据提供的文件信息,我们可以总结出一系列关于JavaScript中常用的验证方法的知识点。这些验证方法主要针对电话号码、邮政编码、身份证号码、手机号码以及电子邮件地址等常见的数据格式进行有效性检查。 ### 1. ...

    javascript表单美化和验证插件

    JavaScript 表单美化和验证插件是Web开发中不可或缺的一部分,尤其在构建用户友好且具有交互性的网页时。这类插件通常提供丰富的功能,以提升表单的视觉吸引力和用户体验,同时确保数据的有效性。本插件具备以下关键...

    用javascript对表单进行验证

    在 JavaScript 中,可以使用正则表达式来验证手机号码的格式。例如,以下代码用于验证手机号码是否合法: ``` function check(){ var code=document.getElementById("mobilecode").value; var re=/^(130|131|133|...

    身份验证JavaScript

    在JSP(JavaServer Pages)页面中,JavaScript可以用来辅助进行初步的身份验证,比如身份证号码(ID Card)的验证,这是【标题】"身份验证JavaScript"所涉及的主要内容。而【描述】提到的"jsp页面中的身份的验证...

Global site tag (gtag.js) - Google Analytics