js驗(yàn)證上傳圖片的方法
更新時(shí)間:2015年05月12日 15:33:26 作者:vivi
這篇文章主要介紹了js驗(yàn)證上傳圖片的方法,可對上傳圖片的類型、大小等進(jìn)行限制,非常簡單實(shí)用,需要的朋友可以參考下
本文實(shí)例講述了js驗(yàn)證上傳圖片的方法。分享給大家供大家參考。具體實(shí)現(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驗(yàn)證圖片</title> <script> UpLoadFileCheck=function() { this.AllowExt=".jpg,.gif"; //允許上傳的文件類型 0為無限制 //每個(gè)擴(kuò)展名后邊要加一個(gè)"," 小寫字母表示 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請選擇一個(gè)文件"; } 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 顯示錯(cuò)誤信息 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è)計(jì)有所幫助。
您可能感興趣的文章:
- 多個(gè)上傳文件用js驗(yàn)證文件的格式和大小的方法(推薦)
- 真正好用的js驗(yàn)證上傳文件大小的簡單方法
- javascript驗(yàn)證上傳文件的類型限制必須為某些格式
- Node.js開發(fā)教程之基于OnceIO框架實(shí)現(xiàn)文件上傳和驗(yàn)證功能
- Javascript驗(yàn)證上傳圖片大小[前臺處理]
- 上傳的js驗(yàn)證(圖片/文件的擴(kuò)展名)
- js 圖片上傳前大小長寬驗(yàn)證代碼
- javascript 客戶端驗(yàn)證上傳圖片的大?。嫒軮E和火狐)
- Javascript 驗(yàn)證上傳圖片大小[客戶端]
- JS簡單驗(yàn)證上傳文件類型的方法
相關(guān)文章
關(guān)于layui toolbar和template的結(jié)合使用方法
今天小編就為大家分享一篇關(guān)于layui toolbar和template的結(jié)合使用方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09推薦5 個(gè)常用的JavaScript調(diào)試技巧
這篇文章主要介紹了推薦5 個(gè)常用的JavaScript調(diào)試技巧,需要的朋友可以參考下2015-01-01JS題解leetcode去掉最低工資和最高工資后的工資平均值
這篇文章主要為大家介紹了JS題解leetcode去掉最低工資和最高工資后的工資平均值,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12JavaScript屏蔽Backspace鍵的實(shí)現(xiàn)代碼
這篇文章主要介紹了JavaScript屏蔽Backspace鍵的實(shí)現(xiàn)代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-11-11JS常用倒計(jì)時(shí)代碼實(shí)例總結(jié)
這篇文章主要介紹了JS常用倒計(jì)時(shí)代碼,結(jié)合實(shí)例形式總結(jié)分析了JS常用的倒計(jì)時(shí)功能實(shí)現(xiàn)方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02基于JavaScript實(shí)現(xiàn)跳轉(zhuǎn)提示頁面
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)跳轉(zhuǎn)提示頁面 的相關(guān)資料,需要的朋友可以參考下2016-09-09