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 相关文章推荐
Add Formatted Text to a Word Document
Jun 15 Javascript
JavaScript 在线压缩和格式化收藏
Jan 16 Javascript
Js控制滑轮左右滑动实例
Feb 13 Javascript
jQuery插件slider实现拖动滑块选取价格范围
Apr 30 Javascript
JavaScript中的this机制
Jan 30 Javascript
js基于cookie记录来宾姓名的方法
Jul 19 Javascript
解决node.js安装包失败的几种方法
Sep 02 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
Dec 13 Javascript
微信小程序云开发使用方法新手初体验
May 16 Javascript
vue实现鼠标移过出现下拉二级菜单功能
Dec 12 Javascript
原生js实现碰撞检测
Mar 12 Javascript
使用vue实现HTML页面生成图片的方法
Mar 12 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动态生成虚拟现实VRML网页
2006/10/09 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
2008/10/29 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
2012/09/14 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
js获取当前路径的简单示例代码
2014/01/08 Javascript
js给页面加style无效果的解决方法
2014/01/20 Javascript
javascript字母大小写转换的4个函数详解
2014/05/09 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
使用Promise解决多层异步调用的简单学习心得
2016/05/17 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
2016/06/13 Javascript
详解Bootstrap各式各样的按钮(推荐)
2016/12/13 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
2017/01/19 Javascript
js实现贪吃蛇小游戏(容易理解)
2017/01/22 Javascript
react-native fetch的具体使用方法
2017/11/01 Javascript
详解.vue文件解析的实现
2018/06/11 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
layer.confirm取消按钮绑定事件的方法
2018/08/17 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
JavaScript实现移动端拖动元素
2020/11/24 Javascript
[01:29:17]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
python实现机器学习之元线性回归
2018/09/06 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
pycharm无法安装第三方库的问题及解决方法以scrapy为例(图解)
2020/05/09 Python
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
初中教师业务学习材料
2014/05/12 职场文书
法定代表人授权委托书范文
2014/08/02 职场文书
信用卡催款律师函
2015/05/27 职场文书
2016中秋晚会开幕词
2016/03/03 职场文书
关于感恩的作文
2019/08/26 职场文书
宝塔更新Python及Flask项目的部署
2022/04/11 Python