JS는 컨트롤을 사용하지 않고 업로드된 이미지 크기를 로컬로 제한합니다_기본 지식

파일 업로드 전 탐지는 일반적으로 파일 이름을 기반으로 파일 형식이 합법적인지 여부를 결정하지만 로컬에서 수행하거나 컨트롤을 사용하지 않는 한 파일 크기를 탐지하기가 어렵습니다. 단어 문제는 JS를 사용하여 쉽게 해결할 수 있습니다. JS는 이미지를 업로드하기 전에 크기를 결정할 수 있습니다. 이는 javascript를 사용하여 얻을 수 있습니다.//업로드할 수 있는 이미지 파일의 크기
구체적인 코드는 다음과 같습니다

코드 복사 코드는 다음과 같습니다

<script> <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 "' style="max-width:90%" style="max-width:90%" alt="JS는 컨트롤을 사용하지 않고 업로드된 이미지 크기를 로컬로 제한합니다_기본 지식" >" <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></script> form enctype ="multipart/form-data" method="POST" onsubmit="return HasChecked;">

>< ;legend>이미지 소스
로컬원격:

미리보기 영역

🎜>

독자는 위 코드를 직접 복사하여 HTML 파일로 저장하여 JS를 미리 볼 수 있습니다. 제한 사항 업로드 이미지 크기 효과