本文實例講述了js驗證上傳圖片的方法。分享給大家供大家參考。具體實現方法如下：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 <!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>希望本文所述對大家的javascript程序設計有所幫助。