tambc

??1 < title > 文件上傳前臺控制檢測程序?v0.6 </ title > ?
??2 < style > ?
??3 body,td {} { font-size : 12px ; } ?
??4 </ style > ?
??5 < script? language =javascript > ?
??6
??7 /**/ /* ----------------------------------------?
??8 ???????文件上傳前臺控制檢測程序?v0.6?
??9
?10 ??遠程圖片檢測功能?
?11 ??檢測上傳文件類型?
?12
?13 　檢測圖片文件格式是否正確?
?14 　檢測圖片文件大小?
?15 　檢測圖片文件寬度?
?16 　檢測圖片文件高度?
?17 ??圖片預覽?
?18
?19 ????????????UpDate:2005/09/03?
?20 ----------------------------------------- */ ?
?21
?22 var ?ImgObj = new ?Image();??? // 建立一個圖像對象?
?23
?24 var ?AllImgExt = " .jpg|.jpeg|.gif|.bmp|.png| " // 全部圖片格式類型?
?25 var ?FileObj,ImgFileSize,ImgWidth,ImgHeight,FileExt,ErrMsg,FileMsg,HasCheked,IsImg // 全局變量?圖片相關屬性?
?26
?27 // 以下為限制變量?
?28 var ?AllowExt = " .jpg|.gif|.doc|.txt| " ? // 允許上傳的文件類型??0為無限制?每個擴展名后邊要加一個"|"?小寫字母表示?
?29 // var?AllowExt=0?
?30 var ?AllowImgFileSize = 70 ;?? // 允許上傳圖片文件的大小?0為無限制??單位：KB?
?31 var ?AllowImgWidth = 500 ;??? // 允許上傳的圖片的寬度??0為無限制　單位：px(像素)?
?32 var ?AllowImgHeight = 500 ;??? // 允許上傳的圖片的高度??0為無限制　單位：px(像素)?
?33
?34 HasChecked = false ;?
?35
?36 function ?CheckProperty(obj)?? // 檢測圖像屬性?
?37 {?
?38 ??FileObj = obj;?
?39 ?? if (ErrMsg != "" )??? // 檢測是否為正確的圖像文件　返回出錯信息并重置?
?40 ?? {?
?41 ????ShowMsg(ErrMsg, false );?
?42 ???? return ? false ;??? // 返回?
?43 ??} ?
?44
?45 ?? if (ImgObj.readyState != " complete " )? // 如果圖像是未加載完成進行循環檢測?
?46 ?? {?
?47 ????setTimeout( " CheckProperty(FileObj) " , 500 );?
?48 ???? return ? false ;?
?49 ??} ?
?50
?51 ??ImgFileSize = Math.round(ImgObj.fileSize / 1024 * 100 ) / 100 ; // 取得圖片文件的大小?
?52 ??ImgWidth = ImgObj.width?;?? // 取得圖片的寬度?
?53 ??ImgHeight = ImgObj.height;?? // 取得圖片的高度?
?54 ??FileMsg = " \n圖片大小: " + ImgWidth + " * " + ImgHeight + " px " ;?
?55 ??FileMsg = FileMsg + " \n圖片文件大小: " + ImgFileSize + " Kb " ;?
?56 ??FileMsg = FileMsg + " \n圖片文件擴展名: " + FileExt;?
?57
?58 ?? if (AllowImgWidth != 0 && AllowImgWidth < ImgWidth)?
?59 ????ErrMsg = ErrMsg + " \n圖片寬度超過限制。請上傳寬度小于 " + AllowImgWidth + " px的文件，當前圖片寬度為 " + ImgWidth + " px " ;?
?60
?61 ?? if (AllowImgHeight != 0 && AllowImgHeight < ImgHeight)?
?62 ????ErrMsg = ErrMsg + " \n圖片高度超過限制。請上傳高度小于 " + AllowImgHeight + " px的文件，當前圖片高度為 " + ImgHeight + " px " ;?
?63
?64 ?? if (AllowImgFileSize != 0 && AllowImgFileSize < ImgFileSize)?
?65 ????ErrMsg = ErrMsg + " \n圖片文件大小超過限制。請上傳小于 " + AllowImgFileSize + " KB的文件，當前文件大小為 " + ImgFileSize + " KB " ;?
?66
?67 ?? if (ErrMsg != "" )?
?68 ????ShowMsg(ErrMsg, false );?
?69 ?? else ?
?70 ????ShowMsg(FileMsg, true );?
?71 } ?
?72
?73 ImgObj.onerror = function () {ErrMsg = ’\n圖片格式不正確或者圖片已損壞 ! ’} ?
?74
?75 function ?ShowMsg(msg,tf)? // 顯示提示信息?tf=true?顯示文件信息?tf=false?顯示錯誤信息?msg-信息內容?
?76 {?
?77 ??msg = msg.replace( " \n " , " <li> " );?
?78 ??msg = msg.replace( / \n / gi, " <li> " );?
?79 ?? if ( ! tf)?
?80 ?? {?
?81 ????document.all.UploadButton.disabled = true ;?
?82 ????FileObj.outerHTML = FileObj.outerHTML;?
?83 ????MsgList.innerHTML = msg;?
?84 ????HasChecked = false ;?
?85 ??} ?
?86 ?? else ?
?87 ?? {?
?88 ????document.all.UploadButton.disabled = false ;?
?89 ???? if (IsImg)?
?90 ??????PreviewImg.innerHTML = " <img?src=’ " + ImgObj.src + " ’?width=’60’?height=’60’> " ?
?91 ???? else ?
?92 ??????PreviewImg.innerHTML = " 非圖片文件 " ;?
?93 ????MsgList.innerHTML = msg;?
?94 ????HasChecked = true ;?
?95 ??} ?
?96 } ?
?97
?98 function ?CheckExt(obj)?
?99 {?
100 ??ErrMsg = "" ;?
101 ??FileMsg = "" ;?
102 ??FileObj = obj;?
103 ??IsImg = false ;?
104 ??HasChecked = false ;?
105 ??PreviewImg.innerHTML = " 預覽區 " ;?
106 ?? if (obj.value == "" ) return ? false ;?
107 ??MsgList.innerHTML = " 文件信息處理中 " ;?
108 ??document.all.UploadButton.disabled = true ;?
109 ??FileExt = obj.value.substr(obj.value.lastIndexOf( " . " )).toLowerCase();?
110 ?? if (AllowExt != 0 && AllowExt.indexOf(FileExt + " | " ) ==- 1 )? // 判斷文件類型是否允許上傳?
111 ?? {?
112 ????ErrMsg = " \n該文件類型不允許上傳。請上傳? " + AllowExt + " ?類型的文件，當前文件類型為 " + FileExt;?
113 ????ShowMsg(ErrMsg, false );?
114 ???? return ? false ;?
115 ??} ?
116
117 ?? if (AllImgExt.indexOf(FileExt + " | " ) !=- 1 )?? // 如果圖片文件，則進行圖片信息處理?
118 ?? {?
119 ????IsImg = true ;?
120 ????ImgObj.src = obj.value;?
121 ????CheckProperty(obj);?
122 ???? return ? false ;?
123 ??} ?
124 ?? else ?
125 ?? {?
126 ????FileMsg = " \n文件擴展名: " + FileExt;?
127 ????ShowMsg(FileMsg, true );?
128 ??} ?
129 ???
130 } ?
131
132 function ?SwitchUpType(tf)?
133 {?
134 ???? if (tf)?
135 ?????str = ’ < input?type = " file " ?name = " file1 " ?onchange = " CheckExt(this) " ?style = " width:180px; " > ’?
136 ???? else ?
137 ?????str = ’ < input?type = " text " ?name = " file1 " ?onblur = " CheckExt(this) " ?style = " width:180px; " > ’?
138 ????document.all.file1.outerHTML = str;?
139 ????document.all.UploadButton.disabled = true ;?
140 ????MsgList.innerHTML = "" ;?
141 } ?
142
143 </ script > ?
144 < form? enctype ="multipart/form-data" ?method ="POST" ?onsubmit ="return?HasChecked;" > ?
145 < fieldset? style ="width:?372;?height:?60;padding:2px;" > ?
146 < legend >< font? color ="#FF0000" > 圖片來源 </ font ></ legend > ?
147 < input? type ="radio" ?name ="radio1" ?checked?onclick ="SwitchUpType(true);" > 本地 < input? type ="radio" ?name ="radio1" ?onclick ="SwitchUpType(false);" > 遠程： < input? type ="file" ?name ="file1" ?onchange ="CheckExt(this)" ?style ="width:180px;" > ? < input? type ="submit" ?id ="UploadButton" ?value ="開始上傳" ?disabled >< br > ?
148 < div? style ="border:1?solid?#808080;background:#E0E0E0;width100%;height:20px;color:#606060;padding:5px;" > ?
149 < table? border ="0" >< tr >< td? width ="60" ?id ="PreviewImg" > 預覽區 </ td >< td? id ="MsgList" ?valign ="top" ></ td ></ tr ></ table > ?
150 </ div > ?
151 </ fieldset > ?
152 </ form >