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 相关文章推荐
利用JQuery动画制作滑动菜单项效果实现步骤及代码
Feb 07 Javascript
查看大图功能代码jquery版
Nov 05 Javascript
解决checkbox的attr(checked)一直为undefined问题
Jun 16 Javascript
JQuery解析XML数据的几个简单实例
May 18 Javascript
微信小程序侧边栏滑动特效(左右滑动)
Jan 23 Javascript
JS中cookie的使用及缺点讲解
May 13 Javascript
微信小程序模板和模块化用法实例分析
Nov 28 Javascript
JS限制输入框输入的实现代码
Jul 02 Javascript
JS正则表达式封装与使用操作示例
May 15 Javascript
使用微信SDK自定义分享的方法
Jul 03 Javascript
小程序开发之模态框组件封装
Apr 23 Javascript
通过js随机函数Math.random实现乱序
May 19 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
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
PHP PDOStatement::nextRowset讲解
2019/02/01 PHP
PHP基于curl实现模拟微信浏览器打开微信链接的方法示例
2019/02/15 PHP
jquery实现控制表格行高亮实例
2013/06/05 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
JQuery实现的图文自动轮播效果插件
2015/06/19 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
2016/05/24 Javascript
Web程序员必备的7个JavaScript函数
2016/06/14 Javascript
JS实现拖拽的方法分析
2016/12/20 Javascript
vue-router 学习快速入门
2017/03/01 Javascript
JS判断两个对象内容是否相等的方法示例
2017/04/10 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
浅析从vue源码看观察者模式
2018/01/29 Javascript
Angular实现的进度条功能示例
2018/02/18 Javascript
小试SVG之新手小白入门教程
2019/01/08 Javascript
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
微信小程序实现二维码签到考勤系统
2020/01/16 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
Vant 在vue-cli 4.x中按需加载操作
2020/11/05 Javascript
Python中字符串的修改及传参详解
2016/11/30 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
python tkinter canvas 显示图片的示例
2019/06/13 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
pytorch方法测试——激活函数(ReLU)详解
2020/01/15 Python
Python图像处理二值化方法实例汇总
2020/07/24 Python
德国富尔达运动鞋店:43einhalb
2020/12/25 全球购物
销售演讲稿范文
2014/01/08 职场文书
英语专业职业生涯规划范文
2014/03/05 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
社会实践心得体会范文
2016/01/14 职场文书
宝塔更新Python及Flask项目的部署
2022/04/11 Python
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js
Go web入门Go pongo2模板引擎
2022/05/20 Golang