js验证上传图片的方法

前端技术 2023/09/02 JavaScript

本文实例讲述了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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/4270

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案