>웹 프론트엔드 >JS 튜토리얼 >JS 이미지 업로드 전 제한 사항에는 (jpg jpg gif 및 크기, 높이 및 너비) 등이 포함됩니다. _javascript 기술

JS 이미지 업로드 전 제한 사항에는 (jpg jpg gif 및 크기, 높이 및 너비) 등이 포함됩니다. _javascript 기술

WBOY
WBOY원래의
2016-05-16 17:46:082003검색
기능:
1. 확장자 제한: jpg || jpg 및 gif만
2. 이미지 크기 제한: K 단위
3. 이미지 너비 및 높이 제한( 둘 다 또는 둘 다 아님)
4. 손상된 사진 제한(미리보기가 없는 사진)
5. 확장자가 변경된 사진 제한(예: 동적 GIF 확장자를 JPG로 강제 적용)
사용 제한 :
InputFile에 onchange 이벤트를 추가하여 파일을 선택한 후 img 태그에 로드할 수 있도록 합니다. 그렇지 않으면 사용이 잘못됩니다.
imglimit.js
코드 복사 코드는 다음과 같습니다.

functionlimitImg(){
var img=document.getElementById(arguments[0]);// 이미지를 표시하는 객체
var maxSize=arguments[1];//
varallowGIF=arguments[2]||false;
var maxWidth=arguments[3 ]||0; maxHeight=arguments[4]||0;
var postfix=getPostfix(img.src);
var str=".jpg"
if(allowGIF) {str =".gif"}
if(str.indexOf(postfix.toLowerCase())==-1){
if(allowGIF){return "이미지 형식이 잘못되었습니다. jpg 또는 gif 이미지만 업로드할 수 있습니다.";}else{return "이미지 형식이 잘못되었습니다. jpg 이미지만 업로드할 수 있습니다.";}
}else if(img.fileSize>maxSize*1024){
return "이미지 크기가 한도를 초과했습니다. 최대 크기로 제한하세요." "K 내에서";
}else{
if(img.fileSize==-1){
return "사진 형식이 잘못되었습니다. 손상되었거나 확장자가 변경되었을 수 있습니다. 다른 것을 선택하세요. picture.";
}else{
if(maxWidth>0){
if(img.width>maxWidth){
return "이미지 너비가 제한을 초과합니다. " maxWidth 이내로 유지하세요. " 픽셀";
}else{
if(img.height>maxHeight){
return "이미지 높이가 제한을 초과했습니다. " maxHeight "픽셀" 이내로 유지하세요.
}else{
return "" ;
}
}
}else{
return "";
}
}
}
}
//Get 경로에 따른 파일 확장자
function getPostfix(path){
return path.substring(path.lastIndexOf("."),path.length)
}

페이지 호출:

코드 복사 코드는 다음과 같습니다.
🎜>
;input type="button" onclick="aa ()" value="업로드" />

--
function aa(){
if(limitImg('img1',100,false,1000,100)==""){
alert("이미지가 성공적으로 업로드되었습니다.")
}else{
alert(limitImg(' img1',100,false,1000,100))
}
}
// -->
>
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.