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获取服务器时间的两个简单方法
Jan 08 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
js 判断浏览器使用的语言示例代码
Mar 22 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
Apr 12 Javascript
Javascript中的包装类型介绍
Apr 02 Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
Dec 07 Javascript
vue.js在标签属性中插入变量参数的方法
Mar 06 Javascript
electron-vue开发环境内存泄漏问题汇总
Oct 10 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
Nov 12 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
Jul 28 Javascript
vue npm install 安装某个指定的版本操作
Aug 11 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
MyEclipse常用配置图文教程
2014/09/11 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
Yii中CGridView禁止列排序的设置方法
2016/07/12 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
使用PHP反射机制来构造&quot;CREATE TABLE&quot;的sql语句
2019/03/21 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
$()JS小技巧
2007/07/21 Javascript
JavaScript 格式字符串的应用
2010/03/29 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
如何动态加载外部Javascript文件
2015/12/02 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
浅谈Angular路由守卫
2017/08/26 Javascript
浅谈node模块与npm包管理工具
2018/01/03 Javascript
Windows下Node爬虫神器Puppeteer安装记
2019/01/09 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
2019/05/21 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
2020/08/04 Javascript
vue解决跨域问题(推荐)
2020/11/10 Javascript
Django的数据模型访问多对多键值的方法
2015/07/21 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
Python爬虫动态ip代理防止被封的方法
2019/07/07 Python
Python matplotlib画图时图例说明(legend)放到图像外侧详解
2020/05/16 Python
家得宝墨西哥官网:The Home Depot墨西哥
2019/11/18 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述
2013/03/30 面试题
校园报刊亭的创业计划书
2014/01/02 职场文书
学校联谊活动方案
2014/02/15 职场文书
大学新闻系求职信
2014/06/03 职场文书
教师优秀党员事迹材料
2014/08/14 职场文书
基层组织建设年活动总结
2015/05/09 职场文书
昆虫记读书笔记
2015/06/26 职场文书
医院病假条怎么写
2015/08/17 职场文书
商业计划书如何写?关键问题有哪些?
2019/07/11 职场文书