js驗證上傳圖片的方法
更新時間:2015年05月12日 15:33:26 作者:vivi
這篇文章主要介紹了js驗證上傳圖片的方法,可對上傳圖片的類型、大小等進行限制,非常簡單實用,需要的朋友可以參考下
本文實例講述了js驗證上傳圖片的方法。分享給大家供大家參考。具體實現(xiàn)方法如下:
<!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+" 類型的文件,當(dāng)前文件類型為"+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的文件,當(dāng)前圖片寬度為"+this.ImgWidth+"px";
if(this.AllowImgHeight!=0&&this.AllowImgHeight<this.ImgHeight)
this.ErrMsg=this.ErrMsg+"\n圖片高度超過限制。請上傳高度小于"+this.AllowImgHeight+"px的文件,當(dāng)前圖片高度為"+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的文件,當(dāng)前文件大小為"+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-信息內(nèi)容
{
/*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程序設(shè)計有所幫助。
相關(guān)文章
關(guān)于layui toolbar和template的結(jié)合使用方法
今天小編就為大家分享一篇關(guān)于layui toolbar和template的結(jié)合使用方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JS題解leetcode去掉最低工資和最高工資后的工資平均值
這篇文章主要為大家介紹了JS題解leetcode去掉最低工資和最高工資后的工資平均值,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-12-12
JavaScript屏蔽Backspace鍵的實現(xiàn)代碼
這篇文章主要介紹了JavaScript屏蔽Backspace鍵的實現(xiàn)代碼,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-11-11
基于JavaScript實現(xiàn)跳轉(zhuǎn)提示頁面
這篇文章主要介紹了基于JavaScript實現(xiàn)跳轉(zhuǎn)提示頁面 的相關(guān)資料,需要的朋友可以參考下2016-09-09

