上傳的js驗(yàn)證(圖片/文件的擴(kuò)展名)
更新時(shí)間:2013年04月25日 14:31:09 作者:
下文給大家介紹下js 驗(yàn)證上傳圖片以及怎樣控制一個(gè)上傳文件的擴(kuò)展名,感興趣的朋友可以參考下哈,希望對(duì)你有所幫助
js 驗(yàn)證上傳圖片
var ImgObj=new Image();//建立一個(gè)圖像對(duì)象
varAllImgExt=".jpg|.jpeg|.gif|.bmp|.png|"http://全部圖片格式類(lèi)型
varFileObj,ImgFileSize,ImgWidth,ImgHeight,FileExt,ErrMsg,FileMsg,IsImg//全局變量圖片相關(guān)屬性
//以下為限制變量
var AllowExt=""; //允許上傳的文件類(lèi)型ŀ為無(wú)限制每個(gè)擴(kuò)展名后邊要加一個(gè)"|" 小寫(xiě)字母表示
var AllowImgFileSize=100;//允許上傳圖片文件的大小 0為無(wú)限制 單位:KB
var AllowImgWidth=385; //允許上傳的圖片的寬度Ɓ為無(wú)限制 單位:px(像素)
var AllowImgHeight=441; //允許上傳的圖片的高度ƹ為無(wú)限制 單位:px(像素)
function CheckProperty(obj) //檢測(cè)圖像屬性
{
FileObj=obj;
if(ImgObj.readyState!="complete")//如果圖像是未加載完成進(jìn)行循環(huán)檢測(cè)
{
setTimeout("CheckProperty(FileObj)",500);
return false;
}
ImgFileSize=Math.round(ImgObj.fileSize/1024*100)/100;//取得圖片文件的大小
ImgWidth=ImgObj.width;//取得圖片的寬度
ImgHeight=ImgObj.height; //取得圖片的高度
FileMsg="\n圖片大小:"+ImgWidth+"*"+ImgHeight+"px";
FileMsg=FileMsg+"\n圖片文件大小:"+ImgFileSize+"Kb";
FileMsg=FileMsg+"\n圖片文件擴(kuò)展名:"+FileExt+"\n可以上傳!";
ErrMsg="";
if(AllowImgWidth!=ImgWidth)
ErrMsg=ErrMsg+"\n請(qǐng)上傳寬度等于"+AllowImgWidth+"px的文件,當(dāng)前圖片寬度為"+ImgWidth+"px";
if(AllowImgHeight!=ImgHeight)
ErrMsg=ErrMsg+"\n請(qǐng)上傳高度等于"+AllowImgHeight+"px的文件,當(dāng)前圖片高度為"+ImgHeight+"px";
if(AllowImgFileSize!=0&&AllowImgFileSize<ImgFileSize)
ErrMsg=ErrMsg+"\n請(qǐng)上傳小于"+AllowImgFileSize+"KB的文件,當(dāng)前文件大小為"+ImgFileSize+"KB";
if(ErrMsg!="")
{
alert(ErrMsg);
return false;
}
else
return true;
}//end CheckProperty();
ImgObj.onerror=function(){ErrMsg='\n圖片格式不正確或者圖片已損壞!';}
function CheckExt(obj)
{
ErrMsg="";
FileMsg="";
IsImg=false;
if(obj.value=="")
return false;
FileExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();
if(AllImgExt.indexOf(FileExt+"|")!=-1)//如果圖片文件,則進(jìn)行圖片信息處理
{
IsImg=true;
FileObj=obj;
ImgObj.src=obj.value;
returnCheckProperty(obj);
}else
{
alert("該文件類(lèi)型不允許上傳。請(qǐng)上傳"+AllImgExt+"類(lèi)型的文件,\n當(dāng)前文件類(lèi)型為"+FileExt);
obj.value='';
return false;
}
}
上傳的js驗(yàn)證
下文給大家介紹怎樣控制一個(gè)上傳文件的擴(kuò)展名。
js:
function check2()
{
var file = document.getElementsByName("file").value;
if(file=="")
{
alert("請(qǐng)選擇文件");
return false;
}
var strTemp = file.split(".");
var strCheck = strTemp[strTemp.length-1];
if(strCheck.toUpperCase()=='JPG')
{
return true;
}else
{
alert('上傳文件類(lèi)型不對(duì)!');
return false;
}
}
表單:
<form action="*.jsp" method="post" onsubmit="return check()">
<input type="file" name="file">
<input type="submit" value="上傳">
</form>
需要注意的是,document.getElementsByName("file").value獲取的是所上傳的文件的絕對(duì)路徑,故使用字符串分割法將文件的拓展名分割出來(lái),然后再進(jìn)行判斷。
復(fù)制代碼 代碼如下:
var ImgObj=new Image();//建立一個(gè)圖像對(duì)象
varAllImgExt=".jpg|.jpeg|.gif|.bmp|.png|"http://全部圖片格式類(lèi)型
varFileObj,ImgFileSize,ImgWidth,ImgHeight,FileExt,ErrMsg,FileMsg,IsImg//全局變量圖片相關(guān)屬性
//以下為限制變量
var AllowExt=""; //允許上傳的文件類(lèi)型ŀ為無(wú)限制每個(gè)擴(kuò)展名后邊要加一個(gè)"|" 小寫(xiě)字母表示
var AllowImgFileSize=100;//允許上傳圖片文件的大小 0為無(wú)限制 單位:KB
var AllowImgWidth=385; //允許上傳的圖片的寬度Ɓ為無(wú)限制 單位:px(像素)
var AllowImgHeight=441; //允許上傳的圖片的高度ƹ為無(wú)限制 單位:px(像素)
function CheckProperty(obj) //檢測(cè)圖像屬性
{
FileObj=obj;
if(ImgObj.readyState!="complete")//如果圖像是未加載完成進(jìn)行循環(huán)檢測(cè)
{
setTimeout("CheckProperty(FileObj)",500);
return false;
}
ImgFileSize=Math.round(ImgObj.fileSize/1024*100)/100;//取得圖片文件的大小
ImgWidth=ImgObj.width;//取得圖片的寬度
ImgHeight=ImgObj.height; //取得圖片的高度
FileMsg="\n圖片大小:"+ImgWidth+"*"+ImgHeight+"px";
FileMsg=FileMsg+"\n圖片文件大小:"+ImgFileSize+"Kb";
FileMsg=FileMsg+"\n圖片文件擴(kuò)展名:"+FileExt+"\n可以上傳!";
ErrMsg="";
if(AllowImgWidth!=ImgWidth)
ErrMsg=ErrMsg+"\n請(qǐng)上傳寬度等于"+AllowImgWidth+"px的文件,當(dāng)前圖片寬度為"+ImgWidth+"px";
if(AllowImgHeight!=ImgHeight)
ErrMsg=ErrMsg+"\n請(qǐng)上傳高度等于"+AllowImgHeight+"px的文件,當(dāng)前圖片高度為"+ImgHeight+"px";
if(AllowImgFileSize!=0&&AllowImgFileSize<ImgFileSize)
ErrMsg=ErrMsg+"\n請(qǐng)上傳小于"+AllowImgFileSize+"KB的文件,當(dāng)前文件大小為"+ImgFileSize+"KB";
if(ErrMsg!="")
{
alert(ErrMsg);
return false;
}
else
return true;
}//end CheckProperty();
ImgObj.onerror=function(){ErrMsg='\n圖片格式不正確或者圖片已損壞!';}
function CheckExt(obj)
{
ErrMsg="";
FileMsg="";
IsImg=false;
if(obj.value=="")
return false;
FileExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();
if(AllImgExt.indexOf(FileExt+"|")!=-1)//如果圖片文件,則進(jìn)行圖片信息處理
{
IsImg=true;
FileObj=obj;
ImgObj.src=obj.value;
returnCheckProperty(obj);
}else
{
alert("該文件類(lèi)型不允許上傳。請(qǐng)上傳"+AllImgExt+"類(lèi)型的文件,\n當(dāng)前文件類(lèi)型為"+FileExt);
obj.value='';
return false;
}
}
上傳的js驗(yàn)證
下文給大家介紹怎樣控制一個(gè)上傳文件的擴(kuò)展名。
js:
復(fù)制代碼 代碼如下:
function check2()
{
var file = document.getElementsByName("file").value;
if(file=="")
{
alert("請(qǐng)選擇文件");
return false;
}
var strTemp = file.split(".");
var strCheck = strTemp[strTemp.length-1];
if(strCheck.toUpperCase()=='JPG')
{
return true;
}else
{
alert('上傳文件類(lèi)型不對(duì)!');
return false;
}
}
表單:
復(fù)制代碼 代碼如下:
<form action="*.jsp" method="post" onsubmit="return check()">
<input type="file" name="file">
<input type="submit" value="上傳">
</form>
需要注意的是,document.getElementsByName("file").value獲取的是所上傳的文件的絕對(duì)路徑,故使用字符串分割法將文件的拓展名分割出來(lái),然后再進(jìn)行判斷。
您可能感興趣的文章:
- js實(shí)現(xiàn)滑動(dòng)滑塊驗(yàn)證登錄
- javascript實(shí)現(xiàn)支付寶滑塊驗(yàn)證碼效果
- 原生JS封裝拖動(dòng)驗(yàn)證滑塊的實(shí)現(xiàn)代碼示例
- php+js實(shí)現(xiàn)的拖動(dòng)滑塊驗(yàn)證碼驗(yàn)證表單操作示例【附源碼下載】
- Node.JS用純JavaScript生成圖片或滑塊式驗(yàn)證碼功能
- Vue 實(shí)現(xiàn)拖動(dòng)滑塊驗(yàn)證功能(只有css+js沒(méi)有后臺(tái)驗(yàn)證步驟)
- 基于JS組件實(shí)現(xiàn)拖動(dòng)滑塊驗(yàn)證功能(代碼分享)
- Javascript 驗(yàn)證上傳圖片大小[客戶(hù)端]
- node.js WEB開(kāi)發(fā)中圖片驗(yàn)證碼的實(shí)現(xiàn)方法
- js+cavans實(shí)現(xiàn)圖片滑塊驗(yàn)證
相關(guān)文章
微信小程序中時(shí)間戳和日期的相互轉(zhuǎn)換問(wèn)題
這篇文章主要介紹了微信小程序中時(shí)間戳和日期的相互轉(zhuǎn)換問(wèn)題,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07javaScript中Math()函數(shù)注意事項(xiàng)
本文主要給大家分享了javascript中Math()函數(shù)的注意事項(xiàng),以及math對(duì)象的方法,十分的簡(jiǎn)單實(shí)用,有需要的小伙伴可以參考下2015-06-06js prototype深入理解及應(yīng)用實(shí)例分析
這篇文章主要介紹了js prototype深入理解及應(yīng)用,結(jié)合實(shí)例形式分析了JavaScript prototype屬性功能、原理、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2019-11-11JavaScript觀察者模式(publish/subscribe)原理與實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript觀察者模式(publish/subscribe)原理與實(shí)現(xiàn)方法,簡(jiǎn)單分析了javascript觀察者模式的原理、功能并結(jié)合實(shí)例形式給出了觀察者模式的實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-03-03JS點(diǎn)擊鏈接后慢慢展開(kāi)隱藏著圖片的方法
這篇文章主要介紹了JS點(diǎn)擊鏈接后慢慢展開(kāi)隱藏著圖片的方法,實(shí)例分析了javascript操作圖片的隱藏與現(xiàn)實(shí)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02js實(shí)現(xiàn)圖片無(wú)縫循環(huán)輪播
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片無(wú)縫循環(huán)輪播,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10JavaScript實(shí)現(xiàn)點(diǎn)擊出現(xiàn)圖片并統(tǒng)計(jì)點(diǎn)擊次數(shù)功能示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊出現(xiàn)圖片并統(tǒng)計(jì)點(diǎn)擊次數(shù)功能,涉及javascript事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-07-07