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 相关文章推荐
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
Apr 26 Javascript
jquery.messager.js插件导致页面抖动的解决方法
Jul 14 Javascript
jQuery如何封装输入框插件
Aug 19 Javascript
JavaScript面试题大全(推荐)
Sep 22 Javascript
使用JavaScript触发过渡效果的方法
Jan 19 Javascript
纯JS实现简单的日历
Jun 26 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
Jul 31 Javascript
angularJS实现动态添加,删除div方法
Feb 27 Javascript
vue-cli 构建骨架屏的方法示例
Nov 08 Javascript
vue+element tabs选项卡分页效果
Jun 29 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
全面解析Vue中的$nextTick
Dec 24 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
PHP 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
浅析memcache启动以及telnet命令详解
2013/06/28 PHP
php 伪静态之IIS篇
2014/06/02 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
如何在PHP中使用数组
2020/06/09 PHP
location.href用法总结(最主要的)
2013/12/27 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
2014/10/17 Javascript
如何用javascript计算文本框还能输入多少个字符
2015/07/29 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
javascript实现倒计时跳转页面
2016/01/17 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
2017/11/20 Javascript
vue实现2048小游戏功能思路详解
2018/05/09 Javascript
Javascript获取某个月的天数
2018/05/30 Javascript
微信小程序中button去除默认的边框实例代码
2019/08/01 Javascript
js实现简易计算器功能
2019/10/18 Javascript
Vue引入Stylus知识点总结
2020/01/16 Javascript
Vue父子之间值传递的实例教程
2020/07/02 Javascript
低版本中Python除法运算小技巧
2015/04/05 Python
Linux下为不同版本python安装第三方库
2016/08/31 Python
python如何生成网页验证码
2018/07/28 Python
centos6.8安装python3.7无法import _ssl的解决方法
2018/09/17 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
使用Python制作一盏 3D 花灯喜迎元宵佳节
2021/02/26 Python
CSS3混合模式mix-blend-mode/background-blend-mode简介
2018/03/15 HTML / CSS
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
Lowe’s加拿大:家居装修、翻新和五金店
2019/12/06 全球购物
中专毕业生自我鉴定
2014/02/02 职场文书
商务英语专业求职信
2014/06/26 职场文书
2015建军节87周年演讲稿
2015/03/19 职场文书
上下班时间调整通知
2015/04/23 职场文书
家装电话营销开场白
2015/05/29 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书
详解Redis集群搭建的三种方式
2021/05/31 Redis