脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js验证上传图片

js验证上传图片的方法

 更新时间：2015年05月12日 15:33:26   作者：vivi  
这篇文章主要介绍了js验证上传图片的方法,可对上传图片的类型、大小等进行限制,非常简单实用,需要的朋友可以参考下

本文实例讲述了js验证上传图片的方法。分享给大家供大家参考。具体实现方法如下：

<!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=utf-8" />
<title>js验证图片</title>
<script>
 UpLoadFileCheck=function()
 { 
  this.AllowExt=".jpg,.gif";
  //允许上传的文件类型 0为无限制
  //每个扩展名后边要加一个"," 小写字母表示 
  this.AllowImgFileSize=0;
  //允许上传文件的大小 0为无限制 单位：KB 
  this.AllowImgWidth=0;
  //允许上传的图片的宽度 0为无限制　单位：px(像素) 
  this.AllowImgHeight=0;
  //允许上传的图片的高度 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; 
 //this.HasChecked=false; 
 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该文件类型不允许上传。请上传 "+this.AllowExt+" 类型的文件，当前文件类型为"+this.FileExt;  
  }
 } 
 if(this.ErrMsg!="") 
 {
  this.ShowMsg(this.ErrMsg,false); 
  return false;
 }
 else  
  return this.CheckProperty(obj);  
 }
 UpLoadFileCheck.prototype.CheckProperty=function(obj)
 {
 if(this.ImgObj.readyState!="complete")//
  { 
  sleep(1000);//一秒使用图能完全加载  
  }  
 if(this.IsImg==true)
 {
  this.ImgWidth=this.ImgObj.width;
  //取得图片的宽度 
  this.ImgHeight=this.ImgObj.height;
  //取得图片的高度
  if(this.AllowImgWidth!=0&&this.AllowImgWidth<this.ImgWidth) 
  this.ErrMsg=this.ErrMsg+"\n图片宽度超过限制。请上传宽度小于"+this.AllowImgWidth+"px的文件，当前图片宽度为"+this.ImgWidth+"px"; 
  if(this.AllowImgHeight!=0&&this.AllowImgHeight<this.ImgHeight) 
  this.ErrMsg=this.ErrMsg+"\n图片高度超过限制。请上传高度小于"+this.AllowImgHeight+"px的文件，当前图片高度为"+this.ImgHeight+"px"; 
 }
 this.ImgFileSize=Math.round(this.ImgObj.fileSize/1024*100)/100;
 //取得图片文件的大小 
 if(this.AllowImgFileSize!=0&&this.AllowImgFileSize<this.ImgFileSize) 
  this.ErrMsg=this.ErrMsg+"\n文件大小超过限制。请上传小于"+this.AllowImgFileSize+"KB的文件，当前文件大小为"+this.ImgFileSize+"KB"; 
 if(this.ErrMsg!="") 
 {
  this.ShowMsg(this.ErrMsg,false); 
  return false;
 }
 else 
  return true; 
 } 
 UpLoadFileCheck.prototype.ShowMsg=function(msg,tf)
 //显示提示信息 tf=false 显示错误信息 msg-信息内容 
 { 
 /*msg=msg.replace("\n","<li>"); 
 msg=msg.replace(/\n/gi,"<li>"); 
  */
 alert(msg);
 }
 function sleep(num) 
 { 
  var tempDate=new Date(); 
  var tempStr=""; 
  var theXmlHttp = new ActiveXObject( "Microsoft.XMLHTTP" ); 
  while((new Date()-tempDate)<num ) 
  { 
  tempStr+="\n"+(new Date()-tempDate); 
  try{ 
  theXmlHttp .open( "get", "about:blank?JK="+Math.random(), false ); 
  theXmlHttp .send(); 
  } 
  catch(e){;} 
  } 
  //containerDiv.innerText=tempStr; 
 return; 
 } 
 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>

希望本文所述对大家的javascript程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • Js通过AES加密后PHP用Openssl解密的方法

    Js通过AES加密后PHP用Openssl解密的方法

    这篇文章主要给大家介绍了关于Js如何通过AES加密后PHP利用Openssl解密的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-07-07
  • 浅谈js中test()函数在正则中的使用

    浅谈js中test()函数在正则中的使用

    下面小编就为大家带来一篇浅谈js中test()函数在正则中的使用。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • js中join()方法举例详解

    js中join()方法举例详解

    这篇文章主要给大家介绍了关于js中join()方法的相关资料,join方法用于把数组中的所有元素放入一个字符串,文中通过代码以及图文介绍的非常详细,需要的朋友可以参考下
    2023-10-10
  • JavaScript的数据类型转换原则(干货)

    JavaScript的数据类型转换原则(干货)

    JavaScript是一门弱类型（或称动态类型）的语言，即变量的类型是不确定的。下面通过本文给大家分享javascript数据类型转换小结，包括显示转换的数据类型和隐式的数据类型转换，感兴趣的朋友跟随脚本一起看看吧
    2018-03-03
  • JavaScript中字符串分割函数split用法实例

    JavaScript中字符串分割函数split用法实例

    这篇文章主要介绍了JavaScript中字符串分割函数split用法,实例分析了javascript中split函数操作字符串的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • 老生常谈JavaScript 函数表达式

    老生常谈JavaScript 函数表达式

    下面小编就为大家带来一篇老生常谈JavaScript 函数表达式。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • ES6学习教程之模板字符串详解

    ES6学习教程之模板字符串详解

    大家都知道在ES6中引进的一种新型的字符串字面量语法-模板字符串，下面这篇文章主要给大家介绍了关于ES6学习教程之模板字符串的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
    2017-10-10
  • JavaScript数组every方法的应用场景实例

    JavaScript数组every方法的应用场景实例

    every方法确定数组中的每一项的结果都满足所写的条件的时候,就会返回true,否则返回false,这篇文章主要给大家介绍了关于JavaScript数组every方法应用场景的相关资料,需要的朋友可以参考下
    2022-12-12
  • 详解ES6中的 Set Map 数据结构学习总结

    详解ES6中的 Set Map 数据结构学习总结

    这篇文章主要介绍了详解ES6中的 Set Map 数据结构学习总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 微信小程序生成海报分享朋友圈的实现方法

    微信小程序生成海报分享朋友圈的实现方法

    利用微信强大的社交能力通过小程序达到裂变的目的，拉取新用户。下面小编给大家带来了微信小程序生成海报分享朋友圈的实现方法，感兴趣的朋友跟随小编一起看看吧
    2019-05-05

最新评论