网站地图    收藏   

主页 > 前端 > javascript >

JavaScript验证上传图片类型函数详解

来源:自学PHP网    时间:2014-09-19 14:47 作者: 阅读:

[导读] 在上传图片时我们可以先简单验证用户提示的是不是图片类型的文件,如果是就上传否则就给出提示图片类型不正确,下面我来给大家介绍几款验证上传图片类型...

前台调用如下

 代码如下 复制代码
OnClientClick="return fucCheckJpgAndGif(form1.File1.value);"

--其中File1为上传文件控件

函数代码:

 代码如下 复制代码

function fucCheckJpgAndGif(strFileName) {
    if (strFileName != "") {
        var strtype = strFileName.substring(strFileName.length - 4, strFileName.length);
        strtype = strtype.toLowerCase();
        if ((strtype == ".jpg") || (strtype == ".gif") || (strtype == "jpeg") || (strtype == ".bmp")) {
            return true;
        }
        else {
            alert("请上传jpg、gif或者bmp格式的图片,谢谢!");
            return false;
        }
    }
    alert("请上传jpg、gif或者bmp格式的图片,谢谢!");
    return false;

}

下面放一个兼容性超级别的上传文件图片类型验证

 代码如下 复制代码

<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)
 {
  while(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;//取得图片文件的大小 
alert(this.ImgFileSize);
  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=20;
  d.CheckExt(obj)
 }
</script>

</head>

<body>
<input name="" type="file"   onChange="c(this)"/>

</body>
</html>

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论