js驗證上傳圖片的方法

2024-05-06 16:20:01

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了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>