js verifies the method for uploading images

  • 2020-06-12 08:27:10
  • OfStack

This article illustrates js's method of verifying uploaded images. Share to everybody for everybody reference. Specific implementation methods are as follows:


<!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 Verify the image </title>
<script>
 UpLoadFileCheck=function()
 { 
  this.AllowExt=".jpg,.gif";
  // Type of file allowed to upload  0 For unlimited 
  // Add after each extension 1 a ","  Lowercase letters mean  
  this.AllowImgFileSize=0;
  // The size of the file allowed for uploading  0 For unlimited   Units: KB 
  this.AllowImgWidth=0;
  // The width of the image allowed to be uploaded  0 Unrestricted units: px( pixel ) 
  this.AllowImgHeight=0;
  // Height of images allowed to be uploaded  0 Unrestricted units: px( pixel ) 
  this.ImgObj=new Image();
  this.ImgFileSize=0;
  this.ImgWidth=0;
  this.ImgHeight=0;
  this.FileExt="";
  this.ErrMsg="";
  this.IsImg=false;// The global variable 
 }
 UpLoadFileCheck.prototype.CheckExt=function(obj)
 {
 this.ErrMsg=""; 
 this.ImgObj.src=obj.value; 
 //this.HasChecked=false; 
 if(obj.value=="")
 {
  this.ErrMsg="\n Please select a 1 A file ";  
 }
 else
 {  
  this.FileExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase(); 
  if(this.AllowExt!=0&&this.AllowExt.indexOf(this.FileExt)==-1)
  // Determines whether the file type allows uploading  
  { 
  this.ErrMsg="\n This file type does not allow uploading. Please upload  "+this.AllowExt+"  Type. The current file type is "+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);//1 Seconds can be fully loaded using graphs   
  }  
 if(this.IsImg==true)
 {
  this.ImgWidth=this.ImgObj.width;
  // Gets the width of the image  
  this.ImgHeight=this.ImgObj.height;
  // Get the height of the image 
  if(this.AllowImgWidth!=0&&this.AllowImgWidth<this.ImgWidth) 
  this.ErrMsg=this.ErrMsg+"\n The image width exceeds the limit. Please upload the width less than "+this.AllowImgWidth+"px The current image width is "+this.ImgWidth+"px"; 
  if(this.AllowImgHeight!=0&&this.AllowImgHeight<this.ImgHeight) 
  this.ErrMsg=this.ErrMsg+"\n The image height exceeds the limit. Please upload the height below "+this.AllowImgHeight+"px , the current image height is "+this.ImgHeight+"px"; 
 }
 this.ImgFileSize=Math.round(this.ImgObj.fileSize/1024*100)/100;
 // Gets the size of the image file  
 if(this.AllowImgFileSize!=0&&this.AllowImgFileSize<this.ImgFileSize) 
  this.ErrMsg=this.ErrMsg+"\n The file size exceeds the limit. Please upload less than "+this.AllowImgFileSize+"KB The current file size is "+this.ImgFileSize+"KB"; 
 if(this.ErrMsg!="") 
 {
  this.ShowMsg(this.ErrMsg,false); 
  return false;
 }
 else 
  return true; 
 } 
 UpLoadFileCheck.prototype.ShowMsg=function(msg,tf)
 // Display prompt message  tf=false  Display error message  msg- Information content  
 { 
 /*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>

Hopefully, this article has been helpful in your javascript programming.


Related articles: