JS上传图片前的限制包括(jpg jpg gif及大小高宽)等

154 阅读 0 评论 102 点赞

我是靠谱客的博主踏实小白菜，最近开发中收集的这篇文章主要介绍JS上传图片前的限制包括(jpg jpg gif及大小高宽)等，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

功能：
1.限制扩展名：只能jpg || jpg和gif
2.限制图片大小：K为单位
3.限制图片宽高：px为单位（要么都有，要么都无）
4.限制已经损坏的图片（没有预览的图片）
5.限制更改过扩展名的图片（比如强制把一个动态的GIF扩展名改为JPG了）
使用限制：
要在InputFile里增加onchange事件，使其选择文件后能在一个img标签里加载出来，否则使用会出错
imglimit.js

复制代码代码如下:

 
function limitImg(){ 
var img=document.getElementById(arguments[0]);//显示图片的对象 
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 "图片格式不对，只能上传jpg或gif图像";}else{return "图片格式不对，只能上传jpg图像";} 
}else if(img.fileSize>maxSize*1024){ 
return "图片大小超过限制,请限制在"+maxSize+"K以内"; 
}else{ 
if(img.fileSize==-1){ 
return "图片格式错误，可能是已经损坏或者更改扩展名导致，请重新选择一张图片"; 
}else{ 
if(maxWidth>0){ 
if(img.width>maxWidth){ 
return "图片宽度超过限制，请保持在"+maxWidth+"像素内"; 
}else{ 
if(img.height>maxHeight){ 
return "图片高度超过限制，请保持在"+maxHeight+"像素内"; 
}else{ 
return ""; 
} 
} 
}else{ 
return ""; 
} 
} 
} 
} 
//根据路径获取文件扩展名 
function getPostfix(path){ 
return path.substring(path.lastIndexOf("."),path.length); 
} 

页面调用：

复制代码代码如下:

 
<body> 
<input type="file" onchange="document.getElementById('img1').src=this.value;" /> 
<img id="img1" /> 
<input type="button" onclick="aa()" value="上传" /> 
</body> 
<mce:script type="text/javascript"><!-- 
function aa(){ 
if(limitImg('img1',100,false,1000,100)==""){ 
alert("图片上传成功"); 
}else{ 
alert(limitImg('img1',100,false,1000,100)); 
} 
} 
// --></mce:script> 