Home > Web Front-end > JS Tutorial > body text

Restrictions before JS uploads images include (jpg jpg gif and size, height and width), etc. _javascript skills

WBOY
Release: 2016-05-16 17:46:08
Original
1990 people have browsed it
Function:
1. Limit extension: only jpg || jpg and gif
2. Limit image size: K in units
3. Limit image width and height: px in unit (either both or neither)
4. Restrict damaged pictures (pictures without preview)
5. Restrict pictures with changed extensions (such as forcing a dynamic GIF extension to JPG )
Usage restrictions:
Add onchange event in InputFile so that it can load it in an img tag after selecting the file, otherwise the use will be wrong
imglimit.js
Copy code The code is as follows:

function limitImg(){
var img=document. getElementById(arguments[0]);//The object displaying the image
var maxSize=arguments[1];//
var allowGIF=arguments[2]||false;
var maxWidth=arguments[3 ]||0;
var 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 "The image format is wrong, only jpg or gif images can be uploaded ";}else{return "The image format is incorrect, only jpg images can be uploaded";}
}else if(img.fileSize>maxSize*1024){
return "The image size exceeds the limit, please limit it to" maxSize "Within K";
}else{
if(img.fileSize==-1){
return "The picture format is wrong. It may be damaged or the extension has been changed. Please choose another picture. ";
}else{
if(maxWidth>0){
if(img.width>maxWidth){
return "The image width exceeds the limit, please keep it within " maxWidth " pixels";
}else{
if(img.height>maxHeight){
return "The image height exceeds the limit, please keep it within " maxHeight "pixels";
}else{
return "" ;
}
}
}else{
return "";
}
}
}
}
//Get the file extension based on the path
function getPostfix(path){
return path.substring(path.lastIndexOf("."),path.length);
}

Page call:
Copy code The code is as follows:







Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template