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 相关文章推荐
javawscript 三级菜单的实现原理
Jul 01 Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
May 26 Javascript
jQuery实现根据生日计算年龄 星座 生肖
Nov 23 Javascript
AngularJS的Filter的示例详解
Mar 07 Javascript
微信小程序 循环及嵌套循环的使用总结
Sep 26 Javascript
vue中实现滚动加载更多的示例
Nov 08 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
Dec 27 Javascript
vue.js中实现登录控制的方法示例
Apr 23 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
Feb 26 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
Sep 25 Javascript
es6函数中的作用域实例分析
Apr 18 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简单静态页生成过程
2008/03/27 PHP
php自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
PHP5全版本绕过open_basedir读文件脚本漏洞详细介绍
2015/01/20 PHP
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
广泛收集的jQuery拖放插件集合
2012/04/09 Javascript
Javascript根据指定下标或对象删除数组元素
2012/12/21 Javascript
jQuery滚动新闻实现代码
2016/06/26 Javascript
Bootstrap字体图标无法正常显示的解决方法
2016/10/08 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
Bootstrap Table使用整理(四)之工具栏
2017/06/09 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
微信小程序云开发之云函数详解
2019/05/16 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
2019/05/16 Javascript
vue 监听 Treeselect 选择项的改变操作
2020/08/31 Javascript
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
[54:09]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
python中图像通道分离与合并实例
2020/01/17 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
美国女性卫生用品公司:Thinx
2017/06/30 全球购物
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
EJB的激活机制
2013/10/25 面试题
旅游市场营销方案
2014/03/09 职场文书
工程售后服务方案
2014/06/08 职场文书
教师暑期培训感言
2014/08/15 职场文书
会计岗位职责
2015/02/03 职场文书
班主任自我评价范文
2015/03/11 职场文书
中学社团活动总结
2015/05/07 职场文书
Android使用EventBus发送消息,Fragment中接收消息的方法会执行多次
2022/04/24 Java/Android
Oracle查看表空间使用率以及爆满解决方案详解
2022/07/23 Oracle