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模拟页面加载进度条的实现代码
Dec 19 Javascript
js选择并转移导航菜单示例代码
Aug 19 Javascript
浅谈node.js中async异步编程
Oct 22 Javascript
jQuery中Nicescroll滚动条插件的用法
Nov 10 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 Javascript
浅谈js获取ModelAndView值的问题
Mar 28 Javascript
微信小程序整合使用富文本编辑器的方法详解
Apr 25 Javascript
vue router 传参获取不到的解决方式
Nov 13 Javascript
Vue父子传递实例讲解
Feb 14 Javascript
Vue axios 跨域请求无法带上cookie的解决
Sep 08 Javascript
javascript实现多边形碰撞检测
Oct 24 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
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
常用星际术语索引(新手指南)
2020/03/04 星际争霸
通过文字传递创建的图形按钮
2006/10/09 PHP
保存到桌面、设为桌面且带图标的PHP代码
2013/11/19 PHP
php中静态类与静态变量用法的区别分析
2015/01/15 PHP
PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用
2015/10/09 PHP
php compact 通过变量创建数组
2016/11/15 PHP
详解PHP队列的实现
2019/03/14 PHP
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
Jquery自定义button按钮的几种方法
2014/06/11 Javascript
2014 HTML5/CSS3热门动画特效TOP10
2014/12/07 Javascript
JavaScript中的对象与JSON
2015/07/03 Javascript
jQuery获取URL请求参数的方法
2015/07/18 Javascript
微信小程序 loading(加载中提示框)实例
2016/10/28 Javascript
jQuery Collapse1.1.0折叠插件简单使用
2017/08/28 jQuery
vue axios整合使用全攻略
2018/05/24 Javascript
seajs和requirejs模块化简单案例分析
2019/08/26 Javascript
JavaScript数组排序小程序实现解析
2020/01/13 Javascript
JavaScript观察者模式原理与用法实例详解
2020/03/10 Javascript
js实现超级玛丽小游戏
2020/03/18 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
巧用Python装饰器 免去调用父类构造函数的麻烦
2012/05/18 Python
python清理子进程机制剖析
2017/11/23 Python
用python的turtle模块实现给女票画个小心心
2019/11/23 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
用 Python 制作地球仪的方法
2020/04/24 Python
python图片合成的示例
2020/11/09 Python
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
世界各地的当地人的食物体验:Eatwith
2019/07/26 全球购物
J2EE面试题集锦(附答案)
2013/08/16 面试题
国际贸易专业求职信
2014/06/04 职场文书
领导干部作风整顿剖析材料
2014/10/11 职场文书
家长对学校的意见和建议
2015/06/03 职场文书
《圆的面积》教学反思
2016/02/19 职场文书
工作一年自我鉴定
2019/06/20 职场文书
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL
Vue2.0搭建脚手架
2022/03/13 Vue.js