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 相关文章推荐
JS中剪贴板兼容性、判断复制成功或失败
Mar 09 Javascript
学习YUI.Ext第五日--做拖放Darg&amp;Drop
Mar 10 Javascript
javaScript实现浮点数转十六进制字符
Oct 29 Javascript
判断输入是否为空,获得输入类型的JS代码
Oct 30 Javascript
jquery删除提示框弹出是否删除对话框
Jan 07 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
Jun 24 Javascript
jQuery使用fadein方法实现渐出效果实例
Mar 27 Javascript
JavaScript返回上一页的三种方法及区别介绍
Jul 04 Javascript
基于 Node.js 实现前后端分离
Apr 23 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
Oct 17 Javascript
对layer弹出框中icon数字参数的说明介绍
Sep 04 Javascript
js中延迟加载和预加载的具体使用
Jan 14 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
全国FM电台频率大全 - 27 陕西省
2020/03/11 无线电
php set_time_limit()函数的使用详解
2013/06/05 PHP
php5.5新数组函数array_column使用
2013/07/08 PHP
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
php 函数使用可变数量的参数方法
2017/05/02 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
广告代码静态化js通用函数
2007/05/09 Javascript
url 特殊字符 传递参数解决方法
2010/01/01 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
浅谈jquery上下滑动的注意事项
2016/10/13 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
2018/08/14 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
vue如何实现动态加载脚本
2020/02/05 Javascript
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
js实现移动端图片滑块验证功能
2020/09/29 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
JS中多层次排序算法的实现代码
2021/01/06 Javascript
Python 实现选择排序的算法步骤
2018/04/22 Python
Python 批量刷博客园访问量脚本过程解析
2019/08/30 Python
python中os包的用法
2020/06/01 Python
css3绘制百度的小度熊
2018/10/29 HTML / CSS
女性时尚在线:IVRose
2019/02/23 全球购物
会计与审计毕业生自荐信范文
2013/12/30 职场文书
好习惯伴我成长演讲稿
2014/05/21 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
个人作风建设剖析材料
2014/10/11 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
可怜妈妈观后感
2015/06/09 职场文书
培训简讯范文
2015/07/20 职场文书
2016先进集体事迹材料范文
2016/02/25 职场文书
2019年干货:自我鉴定
2019/03/25 职场文书