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 相关文章推荐
jQuery Ajax 全解析
Feb 08 Javascript
js实现动态改变字体大小代码
Jan 02 Javascript
jQuery应用之jQuery链用法实例
Jan 19 Javascript
jQuery源码解读之hasClass()方法分析
Feb 20 Javascript
学习javascript面向对象 掌握创建对象的9种方式
Jan 04 Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 Javascript
详解webpack之scss和postcss-loader的配置
Jan 09 Javascript
JS同步、异步、延迟加载的方法
May 05 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
Sep 25 Javascript
ZK中使用JS读取客户端txt文件内容问题
Nov 07 Javascript
Vue插件之滑动验证码用法详解
Apr 05 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
Jul 20 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
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
laravel migrate初学常见错误的解决方法
2017/10/11 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
PHP实现负载均衡下的session共用功能
2018/04/17 PHP
JsRender for index循环索引用法详解
2014/10/31 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
JS事件添加和移出的兼容写法示例
2016/06/20 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
Seajs源码详解分析
2019/04/02 Javascript
Vue.js中的组件系统
2019/05/30 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
2019/09/06 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
2020/07/19 Javascript
Python深入学习之装饰器
2014/08/31 Python
对python自动生成接口测试的示例讲解
2018/11/30 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
django和vue实现数据交互的方法
2019/08/21 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
什么是Python变量作用域
2020/06/03 Python
html5 迷宫游戏(碰撞检测)实例一
2013/07/25 HTML / CSS
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
全球性的在线购物网站:Zapals
2017/03/22 全球购物
PREMIUM-MALL法国:行李、箱包及配件在线
2019/05/30 全球购物
天逸系统(武汉)有限公司Java笔试题
2015/12/29 面试题
工商管理专业应届生求职信
2013/11/04 职场文书
高中美术教学反思
2014/01/19 职场文书
家长会邀请书
2014/01/25 职场文书
三个儿子教学反思
2014/02/03 职场文书
医院我们的节日活动实施方案
2014/08/22 职场文书
协商一致解除劳动合同协议书
2014/09/14 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
信访维稳承诺书
2015/05/04 职场文书
对Golang中的FORM相关字段理解
2021/05/02 Golang
springcloud之Feign超时问题的解决
2021/06/24 Java/Android