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


Posted in Javascript onDecember 19, 2012

功能
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>
Javascript 相关文章推荐
javascript 日期时间函数(经典+完善+实用)
May 27 Javascript
Jquery 获得服务器控件值的方法小结
May 11 Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
Feb 15 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 Javascript
微信小程序 石头剪刀布实例代码
Jan 04 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
详解AngularJS脏检查机制及$timeout的妙用
Jun 19 Javascript
详解vue组件开发脚手架
Jun 15 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
Aug 10 Javascript
小程序从手动埋点到自动埋点的实现方法
Jan 24 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
Sep 21 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 #Javascript
ajax java 实现自动完成功能
Dec 19 #Javascript
JavaScript字符串String和Array操作的有趣方法
Dec 18 #Javascript
学习js在线html(富文本,所见即所得)编辑器
Dec 18 #Javascript
javascript jscroll模拟html元素滚动条
Dec 18 #Javascript
Android中资源文件(非代码部分)的使用概览
Dec 18 #Javascript
js获取单选框或复选框值及操作
Dec 18 #Javascript
You might like
php删除指定目录的方法
2015/04/03 PHP
php递归删除指定文件夹的方法小结
2015/04/20 PHP
tp5递归 无限级分类详解
2019/10/18 PHP
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
JS 获取滚动条高度示例代码
2013/10/24 Javascript
javascipt匹配单行和多行注释的正则表达式
2013/11/20 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
2014/10/17 Javascript
JavaScript实现找质数代码分享
2015/03/24 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
js实现复制功能(多种方法集合)
2018/01/06 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
Python中列表和元组的使用方法和区别详解
2020/12/30 Python
Python 中 Virtualenv 和 pip 的简单用法详解
2017/08/18 Python
python aiohttp的使用详解
2019/06/20 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
python 实现Flask中返回图片流给前端展示
2020/01/09 Python
Python 必须了解的5种高级特征
2020/09/10 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
BONIA波尼亚新加坡官网:皮革手袋,鞋类和配件
2016/08/25 全球购物
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
中专毕业生自荐信
2013/11/16 职场文书
简历自荐信
2013/12/02 职场文书
个人简历自我评价范文
2014/02/04 职场文书
小学生读书感言
2014/02/12 职场文书
幼儿园母亲节活动方案
2014/03/10 职场文书
应届大专生自荐书
2014/06/16 职场文书
课前一分钟演讲稿
2014/08/26 职场文书
物流仓管员岗位职责
2015/04/01 职场文书
廉洁自律证明
2015/06/24 职场文书
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL
win sever 2022如何占用操作主机角色
2022/06/25 Servers