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面向对象(极简主义法minimalist approach)
Jul 17 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 Javascript
jquery实现Ctrl+Enter提交表单的方法
Jul 21 Javascript
JS实现的论坛Ajax打分效果完整实例
Oct 31 Javascript
jQuery表单设置值的方法
Jun 30 jQuery
JS模拟实现哈希表及应用详解
May 04 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
Jul 07 Javascript
JavaScript常用工具方法封装
Feb 12 Javascript
使用webpack构建应用的方法步骤
Mar 04 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
Aug 12 Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
基于vue实现微博三方登录流程解析
Nov 04 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根据日期或时间戳获取星座信息和生肖等信息
2015/10/20 PHP
PHP微信支付开发实例
2016/06/22 PHP
PHP7.1方括号数组符号多值复制及指定键值赋值用法分析
2016/09/26 PHP
PHP 以POST方式提交XML、获取XML,解析XML详解及实例
2016/10/26 PHP
JS创建自定义表格具体实现
2014/02/11 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
2015/08/05 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
详解vue + vuex + directives实现权限按钮的思路
2017/10/24 Javascript
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
2018/07/13 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
2019/05/05 Javascript
详解微信UnionID作用
2019/05/15 Javascript
vue3.0 搭建项目总结(详细步骤)
2019/05/20 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
vue3.0 项目搭建和使用流程
2021/03/04 Vue.js
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
Python ORM框架SQLAlchemy学习笔记之数据查询实例
2014/06/10 Python
Python读取图片EXIF信息类库介绍和使用实例
2014/07/10 Python
详解C++编程中一元运算符的重载
2016/01/19 Python
Python判断列表是否已排序的各种方法及其性能分析
2016/06/20 Python
详解python中的 is 操作符
2017/12/26 Python
详解python 注释、变量、类型
2018/08/10 Python
python 多线程串行和并行的实例
2019/02/22 Python
django认证系统实现自定义权限管理的方法
2019/08/28 Python
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
Html5实现iPhone开机界面示例代码
2013/06/30 HTML / CSS
美国唇部护理专家:Sara Happ
2019/06/19 全球购物
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
北京一家公司的.net开发工程师笔试题
2012/04/17 面试题
幼儿教师思想汇报
2014/01/10 职场文书
秋季运动会广播稿
2014/02/22 职场文书
单位领导婚礼致辞
2015/07/28 职场文书
小学数学新课改心得体会
2016/01/22 职场文书
2016年五一促销广告语
2016/01/28 职场文书