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 相关文章推荐
Jquery实战_读书笔记1—选择jQuery
Jan 22 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
Nov 26 Javascript
javascript三种代码注释方法
Jun 02 Javascript
老生常谈 关于JavaScript的类的继承
Jun 24 Javascript
微信小程序本作用域下调用全局JS详解及实例
Feb 22 Javascript
ECMAScript6--解构
Mar 30 Javascript
js 两个日期比较相差多少天的实例
Oct 19 Javascript
微信小程序画布圆形进度条显示效果
Nov 17 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
Jul 18 Javascript
微信小程序实现图片上传
May 23 Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 05 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
Jun 17 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 变量定义和变量替换的方法
2009/07/30 PHP
php截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
php trim 去除空字符的定义与语法介绍
2010/05/31 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
PHP实现的简单排列组合算法应用示例
2017/06/20 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
js数组去重的常用方法总结
2014/01/24 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
jQuery给动态添加的元素绑定事件的方法
2015/03/09 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
javascript中的后退和刷新实现方法
2016/11/10 Javascript
移动端手指放大缩小插件与js源码
2017/05/22 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
jQueryUI Sortable 应用Demo(分享)
2017/09/07 jQuery
vue.js实例对象+组件树的详细介绍
2017/10/20 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
2018/06/28 Javascript
vue-cli点击实现全屏功能
2020/03/07 Javascript
js实现随机圆与矩形功能
2020/10/29 Javascript
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
Python中subprocess模块用法实例详解
2015/05/20 Python
Python针对给定字符串求解所有子序列是否为回文序列的方法
2018/04/21 Python
Python实现多进程的四种方式
2019/02/22 Python
Pandas将列表(List)转换为数据框(Dataframe)
2020/04/24 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
拉夫劳伦爱尔兰官方网站:Ralph Lauren爱尔兰
2020/04/10 全球购物
销售员自我评价怎么写
2013/09/19 职场文书
写给妈妈的道歉信
2014/01/11 职场文书
中学生励志演讲稿
2014/04/26 职场文书
设计专业毕业生求职信
2014/06/25 职场文书
城市规划应届毕业生自荐信
2014/07/04 职场文书
SQLServer 日期函数大全(小结)
2021/04/08 SQL Server
了解MySQL查询语句执行过程(5大组件)
2022/08/14 MySQL