咨询热线:4006-75-4006

售前:9:00-23:30    备案:9:00-18:00    技术:7*24h

从JS上传图片代码中找到限制大小的控件函数

2017-12-25 21:34:08 17873次

这里我们找了一个简单的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>

从中我们可以找到这样一段if(img.fileSize>maxSize*1024) 啊这里就是对上传图片进行的大小判断。
安装这样思路我们在处理在JS里面的上传限制的时候可以通过搜索.fileSize这样的关键词来找到我们的大小修改地方。

首页
最新活动
个人中心