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 call和apply方法
Nov 24 Javascript
JavaScript 快捷键设置实现代码
Mar 13 Javascript
js操作时间(年-月-日 时-分-秒 星期几)
Jun 20 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
Apr 22 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
May 03 Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 Javascript
微信小程序 setData的使用方法详解
Apr 20 Javascript
vue elementUI使用tabs与导航栏联动
Jun 21 Javascript
Javascript幻灯片播放功能实现过程解析
May 07 Javascript
微信小程序返回上一级页面的实现代码
Jun 19 Javascript
vue实现点击按钮切换背景颜色的示例代码
Jun 23 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压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
php模块memcache和memcached区别分析
2011/06/14 PHP
php入门学习知识点八 PHP中for循环基本应用之九九乘法口绝表
2011/07/14 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
2011/02/18 Javascript
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
JavaScript淡入淡出渐变简单实例
2015/08/06 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
2015/12/03 Javascript
基于JavaScript实现右键菜单和拖拽功能
2016/11/28 Javascript
JavaScript 详解预编译原理
2017/01/22 Javascript
浅谈js中的变量名和函数名重名
2017/02/13 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
2017/03/06 Javascript
轻松理解JavaScript之AJAX
2017/03/15 Javascript
jQuery中库的引用方法
2018/01/06 jQuery
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
Python求解平方根的方法
2015/03/11 Python
Python中用post、get方式提交数据的方法示例
2017/09/22 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
python selenium firefox使用详解
2019/02/26 Python
react+django清除浏览器缓存的几种方法小结
2019/07/17 Python
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
详解HTML5通讯录获取指定多个人的信息
2016/12/20 HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
2014/11/05 HTML / CSS
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
戴尔新西兰官网:Dell New Zealand
2020/01/07 全球购物
外国语学院毕业生自荐信
2013/10/28 职场文书
数控机床专业自荐信
2014/05/19 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
圣诞晚会主持词开场白
2015/05/28 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书
Ajax异步刷新功能及简单案例
2021/11/20 Javascript