[JS]Preview and inspection before uploading images
Monday on July 2nd, 2007Life
File upload foreground control detection program v0.6
& lt;style>Body,td {font-size:12px;}& lt;/style>& lt;script language=javascript>/*--For 51js Author:333 Date:2005/08/26UpDate:2005/09/03-- */Var ImgObj=new Image ();//create an image objectVar AllImgExt=".jpg | .jpeg | .gif | .bmp | .png | & quot;//all picture format typesVar FileObj,ImgFileSize,ImgWidth,ImgHeight,FileExt,ErrMsg,FileMsg,HasCheked,IsImg//global variable picture related properties//the following are restricted variablesVar AllowExt=".jpg | .gif | .doc | .txt | & quot;//types of files allowed to be uploaded? Add a & quot; | & quot; lowercase letter to indicate an unlimited extension.//var AllowExt=0Var AllowImgFileSize=70;//the size of image files allowed to be uploaded is 0, which is unlimited: KBVar AllowImgWidth=500;//the width of the image allowed to be uploaded? Unlimited units: px (pixels)Var AllowImgHeight=500;//the height of the pictures allowed to be uploaded? Unlimited units: px (pixels)HasChecked=falseFunction CheckProperty (obj)//detect image attributes{FileObj=objIf//detect whether the correct image file returns an error message and reset it{ShowMsg (ErrMsg,false)Return false;//return}If (ImgObj.readyStatewritten complete quotcomplete complete quot;)//cycle detection if the image is not loaded{SetTimeout (& quot;CheckProperty (FileObj) & quot;,500)Return false}ImgFileSize=Math.round (ImgObj.fileSize/1024*100)/100ram/get the size of the picture fileImgWidth=ImgObj.width//get the width of the pictureImgHeight=ImgObj.height;//get the height of the pictureFileMsg="\ nPicture size: & quot;+ImgWidth+"*"+ImgHeight+"px"FileMsg=FileMsg+"\ nPicture file size: & quot;+ImgFileSize+"Kb"FileMsg=FileMsg+"\ nPicture file extension: & quot;+FileExtIf (AllowImgWidthparts)ErrMsg=ErrMsg+"\ nThe width of the picture exceeds the limit. Please upload a file whose width is less than & quot;+AllowImgWidth+"px. The current image width is & quot;+ImgWidth+"px".If (AllowImgHeightbatch)ErrMsg=ErrMsg+"\ nThe height of the picture exceeds the limit. Please upload a file whose height is less than & quot;+AllowImgHeight+"px. The current image height is & quot;+ImgHeight+"px".If (AllowImgFileSizeSizeAllowImgFileSizeSizesize)ErrMsg=ErrMsg+"\ nPicture file size exceeds the limit. Please upload a file less than & quot;+AllowImgFileSize+"KB. The current file size is & quot;+ImgFileSize+"KB".If (ErrMsglitz)ShowMsg (ErrMsg,false)ElseShowMsg (FileMsg,true)}ImgObj.onerror=function () {ErrMsg='\ nThe picture format is incorrect or the picture is corrupted!'}Function ShowMsg (msg,tf)//display prompt information tf=true display file information tf=false display error message msg- message content{Msg=msg.replace (& quot;\ ncharter quotte;Msg=msg.replace (/\ nAccording to githschilding quotters;If (! tf){Document.all.UploadButton.disabled=trueFileObj.outerHTML=FileObj.outerHTMLMsgList.innerHTML=msgHasChecked=false}Else{Document.all.UploadButton.disabled=falseIf (IsImg)PreviewImg.innerHTML=""ElsePreviewImg.innerHTML=" non-picture file & quotMsgList.innerHTML=msgHasChecked=true}}Function CheckExt (obj){ErrMsg=""FileMsg=""FileObj=objIsImg=falseHasChecked=falsePreviewImg.innerHTML=" Preview area & quotIf (obj.value=="") return falseMsgList.innerHTML=" file information processing. & quotDocument.all.UploadButton.disabled=trueFileExt=obj.value.substr (obj.value.lastIndexOf (& quot;.")) .toLowerCase ()If (FileExt+"/& quot;) =-1)//determine whether the file type allows uploading{ErrMsg="\ nThe file type is not allowed to upload. Please upload a file of type & quot;+AllowExt+". The current file type is & quot;+FileExt.ShowMsg (ErrMsg,false)Return false}If (AllImgExt.indexOf (FileExt+" | & quot;)! =-1)//if the picture file, the picture information is processed{IsImg=trueImgObj.src=obj.valueCheckProperty (obj)Return false}Else{FileMsg="\ nFile extension: & quot;+FileExtShowMsg (FileMsg,true)}}Function SwitchUpType (tf){If (tf)Str=''ElseStr=''Document.all.file1.outerHTML=strDocument.all.UploadButton.disabled=trueMsgList.innerHTML=""}& lt;/script>& lt;form enctype="multipart/form-data" method="POST" onsubmit="return HasChecked;">& lt;fieldset style="width: 372; height: 60& lt;legend> Picture Source & lt;/font> Local & lt;input type="radio" name="radio1" onclick="SwitchUpType (false); & quot;> remote: & lt;input type="file" name="file1" onchange="CheckExt (this) & quot; style="width:180px;"> & lt;input type=" Submit" id="UploadButton" value=" starts uploading & quot; disabled>& lt;div style="border:1 solid # 808080cross backgrounddisplacement instrument E0E0E0E0Width100% ownership heightve20pxplaycolorride606060entpaddingtype5pxtransferlequotwittergt& lt;table border="0">Preview area & lt;/td> check_upload.txt
(4.68KB, download times: 305, upload time: 2007-07-02 19:43)
Copyright Protection: ShuDudu from the original article, reproduced Please keep the link: https://www.shududu.com/life/JS-Preview-and-inspection-before-uploading-images.htm