文件上傳之前的檢測，通常是透過文件名來判斷文件類型是否合法，但是要想檢測文件的大小很難辦到，除非在本地或使用控制項。使用JS可以輕鬆解決單字問題，js在上傳圖片前判斷大小這個可以用javascript實現,效果...//允許上傳圖片檔案的大小具體程式碼如下 複製程式碼 程式碼如下: <BR>var ImgObj=new Image(); //建立一個圖片物件<BR>var AllImgExt=".jpg|.jpeg|.gif|.bmp|.png |"//全部圖片格式類型<BR>var FileObj,ImgFileSize,ImgWidth,ImgHeight,FileExt,ErrMsg,FileMsg,HasCheked,IsImg//全域變數圖片相關屬性<BR>//以下為限制變數<BR>var Allowt =".jpg|.gif|.doc|.txt|" //允許上傳的檔案類型?為無限制每個副檔名後邊要加一個"|" 小寫字母表示<BR>//var AllowExt=0 <BR>var AllowImgFileSize=70; //允許上傳圖片檔案的大小0為無限單位：KB <BR>var AllowImgWidth=500; //允許上傳的圖片的寬度?為無限單位：px(像素) <BR>var AllowImgHeight=500; //允許上傳的圖片的高度?為無限制單位：px(像素) <BR>HasChecked=false; <BR>function CheckProperty(obj) //偵測圖片屬性<BR>{ <BR>FileObj=obj; <BR>if(ErrMsg!="") //偵測是否為正確的影像檔案傳回出錯訊息並重設<BR>{ <BR>ShowMsg(ErrMsg,false); <BR>return false ; //回傳<BR>} <BR>if(ImgObj.readyState!="complete") //如果圖片是未載入完成進行循環偵測<BR>{ <BR>setTimeout("CheckProperty(FileObj)",500 ); <BR>return false; <BR>} <BR>ImgFileSize=Math.round(ImgObj.fileSize/1024*100)/100;//取得圖片檔案的大小<BR>ImgWidth=ImgObj.width //取得圖片檔案的大小<BR>ImgWidth=ImgObj.width //取得圖片圖片的寬度<BR>ImgHeight=ImgObj.height; //取得圖片的高度<BR>FileMsg="n圖片大小:" ImgWidth "*" ImgHeight "px"; <BR>FileMsg=FileMsg "n圖片檔案大小: " ImgFileSize "Kb"; <BR>FileMsg=FileMsg "n圖片檔案副檔名:" FileExt; <BR>if(AllowImgWidth!=0&&AllowImgWidth<ImgWidth) <BR>ErrMsgn=ErrFcsgn=ErrMsgn圖片超過寬度。請上傳寬度小於" AllowImgWidth "px的文件，目前圖片寬度為" ImgWidth "px"; <BR>if(AllowImgHeight!=0&&AllowImgHeight<ImgHeight) <BR>ErrMsg=ErrMsg "n圖片圖片超過高度限制。請上傳高度小於" AllowImgHeight "px的文件，目前圖片高度為" ImgHeight "px"; <BR>if(AllowImgFileSize!=0&&AllowImgFileSize<ImgFileSize) <BR>ErrMsg=ErrMsg "n圖片檔案大小超過。請上傳小於" AllowImgFileSize "KB的文件，目前檔案大小為" ImgFileSize "KB"; <BR>if(ErrMsg!="") <BR>ShowMsg(ErrMsg,false); <BR>else <BR>SsgMsg( FileMsg,true); <BR>} <BR>ImgObj.onerror=function(){ErrMsg='n圖片格式不正確或圖片已損壞!'} <BR>function ShowMsg(msg,tf) //顯示提示訊息tf=true 顯示檔案資訊tf=false 顯示錯誤訊息msg-訊息內容<BR>{ <BR>msg=msg.replace("n","<li>"); <BR>msg=msg.replace(/ n/gi,"<li>"); <BR>if(!tf) <BR>{ <BR>document.all.UploadButton.disabled=true; <BR>FileObj.outerHTML=FileObj.outerHTML; <BR>FileObj.outerHTML=FileObj.outerHTML; MsgList.innerHTML=msg; <BR>HasChecked=false; <BR>} <BR>else <BR>{ <BR>document.all.UploadButton.disabled=false; <BR>if(Isument.all.UploadButton.disabled=false； innerHTML="<img src='" ImgObj.src "' style="max-width:90%" style="max-width:90%" alt="JS限制上傳圖片大小不使用控制項在本機實作_基礎知識" >" <BR>else <BR>PreviewImg.innerHTML="非圖片檔案"; <BR>MsgList.ininHTML= msg; <BR>HasChecked=true; <BR>} <BR>} <BR>function CheckExt(obj) <BR>{ <BR>ErrMsg=""; <BR>FileM=""; <BR>FileObsg= obj; <BR>IsImg=false; <BR>HasChecked=false; <BR>PreviewImg.innerHTML="預覽區"; <BR>if(obj.value=="")return false; <BR>MsgList.inHTj.value=="")return false; <BR>MsgList.inHTj.value=="")return false； ="檔案資訊處理中..."; <BR>document.all.UploadButton.disabled=true; <BR>FileExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase() ; <BR>if(AllowExt!=0&&AllowExt.indexOf(FileExt "|")==-1) //判斷檔案類型是否允許上傳<BR>{ <🎜>ErrMsg="n該檔案類型不允許上傳。請上傳" AllowExt " 類型的文件，目前文件類型為" FileExt; <BR>ShowMsg(ErrMsg,false); <BR>return false; <BR>} <BR>if(AllImgExt.indexOf(FileExt "|") !=-1) //如果圖片文件，則進行圖片資訊處理<BR>{ <BR>IsImg=true; <BR>ImgObj.src=obj.value; <BR>CheckProperty(obj); <BR>return false; <BR>} <BR>else <BR>{ <BR>FileMsg="n檔案副檔名:" FileExt; <BR>ShowMsg(FileMsg,true); <BR>} <BR>} <🎜(FileMsg,true); <BR>} <BR>} <BR>function SwitchUpType(tf) <BR>{ <BR>if(tf) <BR>str='<input type="file" name="file1" onchange="CheckExt(this)" style="width:180px;"> ' <BR>else <BR>str='<input type="text" name="file1" onblur="CheckExt(this)" style="width:180px;">' <BR>document.all.file1. outerHTML=str; <BR>document.all.UploadButton.disabled=true; <BR>MsgList.innerHTML=""; <BR>} <BR> 圖片來源 本地遠端： ; 預覽區 注意讀者可以直接複製以上程式碼，另存為HTML檔案裡，預覽JS限制上傳圖片大小效果
