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函数
May 27 Javascript
js判断手机和pc端选择不同执行事件的方法
Jan 30 Javascript
教你如何终止JQUERY的$.AJAX请求
Feb 23 Javascript
Bootstrap每天必学之轮播(Carousel)插件
Apr 25 Javascript
jQuery实现立体式数字滚动条增加效果
Dec 21 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
Mar 03 Javascript
vue中的watch监听数据变化及watch中各属性的详解
Sep 11 Javascript
一个因@click.stop引发的bug的解决
Jan 08 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
May 20 Javascript
Async/Await替代Promise的6个理由
Jun 15 Javascript
详解JavaScript原型与原型链
Nov 16 Javascript
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
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
10个实用的PHP代码片段
2011/09/02 PHP
php mail to 配置详解
2014/01/16 PHP
强制PHP命令行脚本单进程运行的方法
2014/04/15 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
分享XmlHttpRequest调用Webservice的一点心得
2012/07/20 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
基于jQuery的图片不完全按比例自动缩小
2014/07/11 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
Jquery EasyUI $.Parser
2017/06/02 jQuery
vue实现全选、反选功能
2020/11/17 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
使用JavaScript实现点击循环切换图片效果
2017/09/03 Javascript
利用JQUERY实现多个AJAX请求等待的实例
2017/12/14 jQuery
bootstrap fileinput插件实现预览上传照片功能
2018/01/23 Javascript
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
获取layer.open弹出层的返回值方法
2018/08/20 Javascript
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
[03:09]2014DOTA2国际邀请赛 赛场上的美丽风景线 中国Coser也爱DOTA2
2014/07/20 DOTA
使用Python下载Bing图片(代码)
2013/11/07 Python
Python中SOAP项目的介绍及其在web开发中的应用
2015/04/14 Python
Python基于dom操作xml数据的方法示例
2018/05/12 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
Python遍历字典方式就实例详解
2019/12/28 Python
Python super()函数使用及多重继承
2020/05/06 Python
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
大学生四年生活自我鉴定
2013/11/21 职场文书
商场促销活动策划方案
2014/08/18 职场文书
委托函范文
2015/01/29 职场文书
百家讲坛观后感
2015/06/12 职场文书
企业愿景口号
2015/12/25 职场文书
vue3引入highlight.js进行代码高亮的方法实例
2022/04/08 Vue.js
安装Ruby和 Rails的详细步骤
2022/04/19 Ruby