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 相关文章推荐
制作特殊字的脚本
Jun 26 Javascript
ASP中进行HTML数据及JS数据编码函数
Nov 11 Javascript
Jquery AutoComplete自动完成 的使用方法实例
Mar 19 Javascript
30个最佳jQuery Lightbox效果插件分享
Apr 11 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
javascript实现给定半径求出圆的面积
Jun 26 Javascript
Node.js+Express配置入门教程
May 19 Javascript
原生js实现倒计时--2018
Feb 21 Javascript
关于vue.js过渡css类名的理解(推荐)
Apr 10 Javascript
JS常用正则表达式总结【经典】
May 12 Javascript
js生成word中图片处理方法
Jan 06 Javascript
javascript实现计算指定范围内的质数示例
Dec 29 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 数字左侧自动补0
2008/03/31 PHP
用php或asp创建网页桌面快捷方式的代码
2010/03/23 PHP
PHP 调试工具Debug Tools
2011/04/30 PHP
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
从刷票了解获得客户端IP的方法
2015/09/21 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
Laravel 的数据库迁移的方法
2017/07/31 PHP
PHP使用 Imagick 扩展实现图片合成,圆角处理功能示例
2019/09/09 PHP
根据分辩率调用不同的CSS.
2007/01/08 Javascript
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
jQuery性能优化技巧分析
2015/02/20 Javascript
javascript的函数劫持浅析
2016/09/26 Javascript
javascript轮播图算法
2016/10/21 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
JS实现扫码枪扫描二维码功能
2020/01/03 Javascript
Python语言描述最大连续子序列和
2017/12/05 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
Django model序列化为json的方法示例
2018/10/16 Python
python看某个模块的版本方法
2018/10/16 Python
TensorFlow实现自定义Op方式
2020/02/04 Python
python离线安装外部依赖包的实现
2020/02/13 Python
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
亚马逊巴西站:Amazon.com.br
2019/09/22 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/11/24 面试题
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
php优化查询foreach代码实例讲解
2021/03/24 PHP
环保项目建议书
2014/08/26 职场文书
美术教师个人总结
2015/02/06 职场文书
2015年秋季运动会加油稿
2015/07/22 职场文书
Python使用海龟绘图实现贪吃蛇游戏
2021/06/18 Python
nginx作grpc的反向代理踩坑总结
2021/07/07 Servers
Golang并发操作中常见的读写锁详析
2021/08/30 Golang
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android