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中的window.event.keyCode使用介绍
Apr 26 Javascript
用jquery方法操作radio使其默认选项是否
Sep 10 Javascript
jQuery列表拖动排列具体实现
Nov 04 Javascript
jQuery客户端分页实例代码
Nov 18 Javascript
jQuery中:submit选择器用法实例
Jan 03 Javascript
AngularJS中的模块详解
Jan 29 Javascript
Angular.js如何从PHP读取后台数据
Mar 24 Javascript
8 行 Node.js 代码实现代理服务器
Dec 05 Javascript
JS正则表达式之非捕获分组用法实例分析
Dec 28 Javascript
微信小程序商城项目之商品属性分类(4)
Apr 17 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
Dec 03 Javascript
vue项目中使用bpmn为节点添加颜色的方法
Apr 30 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之require/include顺序 推荐
2011/01/02 PHP
PHP中怎样防止SQL注入分析
2014/10/23 PHP
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
PHP中加速、缓存扩展的区别和作用详解(eAccelerator、memcached、xcache、APC )
2016/07/09 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
Add a Formatted Table to a Word Document
2007/06/15 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
2011/04/10 Javascript
eclipse导入jquery包后报错的解决方法
2014/02/17 Javascript
jquery中$each()方法的使用指南
2015/04/30 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
仅30行代码实现Javascript中的MVC
2016/02/15 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
2017/08/18 Javascript
详解express + mock让前后台并行开发
2018/06/06 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
关于layui的动态图标不显示的解决方法
2019/09/04 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
Python中正则表达式的用法实例汇总
2014/08/18 Python
python使用turtle绘制分形树
2018/06/22 Python
Python实现程序判断季节的代码示例
2019/01/28 Python
Python实现SQL注入检测插件实例代码
2019/02/02 Python
python 寻找离散序列极值点的方法
2019/07/10 Python
Python进度条的制作代码实例
2019/08/31 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
行政助理岗位职责范文
2013/12/03 职场文书
单位在职证明范本
2014/01/09 职场文书
干部下基层实施方案
2014/03/14 职场文书
毕业生就业意向书
2014/04/01 职场文书
房产转让协议书
2014/04/11 职场文书
党的生日活动方案
2014/08/15 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
合同审查法律意见书
2015/06/04 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
Python如何使用logging为Flask增加logid
2021/03/30 Python
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL