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.