파일 업로드 전 탐지는 일반적으로 파일 이름을 기반으로 파일 형식이 합법적인지 여부를 결정하지만 로컬에서 수행하거나 컨트롤을 사용하지 않는 한 파일 크기를 탐지하기가 어렵습니다. 단어 문제는 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 AllowExt=".jpg|.gif|.doc|.txt|" //어떤 유형의 파일을 업로드할 수 있나요? 무제한의 경우 각 확장자 뒤에 "|"를 추가하세요. //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; //Return<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>ImgHeight=ImgObj.height; //사진 높이 가져오기<br>FileMsg="n사진 크기:" ImgWidth "*" ImgHeight "px"; <br>FileMsg=FileMsg "n그림 파일 크기:"ImgFileSize"Kb"; " 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>ShowMsg ( FileMsg,true); <BR>} <BR>ImgObj.onerror=function(){ErrMsg='n그림 형식이 잘못되었거나 그림이 손상되었습니다!'} <BR>function ShowMsg(msg,tf) //표시 프롬프트 메시지 tf=true는 파일 정보를 표시합니다. tf=false는 오류 메시지를 표시합니다. msg-information content <BR>{ <BR>msg=msg.replace("n","<li>") <br>msg=msg. 교체( /n/gi,"<li>"); <br>if(!tf) <br>{ <br>document.all.UploadButton.disabled=true <br>FileObj.outerHTML=FileObj.outerHTML ; <br>MsgList.innerHTML=msg; <br>HasChecked=false; <br>} <br>else <br>{ <br>document.all.UploadButton.disabled=false <br> 🎜> PreviewImg.innerHTML="<img src='" ImgObj.src "' width='60' height='60'>" <br>else <br>PreviewImg.innerHTML="이미지가 아닌 파일"; <br> MsgList.innerHTML=msg; <br>HasChecked=true; <br>} <br>} <br>CheckExt(obj) <br>{ <br>ErrMsg="" <br>FileMsg=" "; <br>FileObj=obj; <br>IsImg=false; <br>HasChecked=false; <br>PreviewImg.innerHTML="미리보기 영역"; <br>if(obj.value=="")return false ; <br>MsgList.innerHTML="파일 정보 처리 중..."; <br>document.all.UploadButton.disabled=true; <br>FileExt=obj.value.substr(obj.value.lastIndexOf("." )) .toLowerCase(); <br>if(AllowExt!=0&&AllowExt.indexOf(FileExt "|")==-1) //파일 형식 업로드 허용 여부 확인<br>{ <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>false 반환 <br>} <br>else <br>{ <br>FileMsg="n파일 확장자:" FileExt <br>ShowMsg(FileMsg,true) <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;">' document.all.file1.outerHTML=str; <br>document.all.UploadButton.disabled=true; <br>MsgList.innerHTML="" <br>} <br> form enctype ="multipart/form-data" method="POST" onsubmit="return HasChecked;"> >< ;legend>이미지 소스 로컬원격: 미리보기 영역 🎜> 독자는 위 코드를 직접 복사하여 HTML 파일로 저장하여 JS를 미리 볼 수 있습니다. 제한 사항 업로드 이미지 크기 효과
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
