JS检测图片大小的实例


Posted in Javascript onAugust 21, 2013
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <input type="hidden" name="MAX_FILE_SIZE" id="MAX_FILE_SIZE" value="8000000" />
  <input type="file" name="files" id="files"   onchange="checkFileType(this)"/> 
   <script type="text/javascript"> 

var maxSize=document.getElementByIdx_x('MAX_FILE_SIZE').value; 
function checkFileType(obj){
var path=obj.value.toString();
var perfix=path.substring(path.indexOf('.')+1);
var regExp=/(jpg|jpeg|gif|png)/gi;
if(perfix.match(regExp)){
checkFileSize(obj); //如果图片文件类型匹配成功则执行文件大小的检测。
}else{
alert('对不起,请选择图片文件'); return false;
} } 
function checkFileSize(obj){
var img=new Image();
try{
var imgSize=obj.files.item(0).fileSize;
return isLarged(imgSize,maxSize);//图片文件大小比对。
}catch(e){ try{
img.src=obj.value;
return isLarged(img.fileSize,maxSize);
}catch(e){
obj.select();
var path=document.selection.createRange.text();
img.src=path;
return isLarged(img.fileSize,maxSize);
} } } 
function isLarged(imgSize,maxSize){
if(imgSize>maxSize){
alert('对不起,您选择的图片文件超过了'+parseInt(maxSize/1024)+'Kb');
return false;
}else{
alert(parseInt(imgSize/1024)+ 'kb ' + 'This large is OK');
return true;
} } </script>
Javascript 相关文章推荐
jquery的冒泡事件的阻止与允许(三种实现方法)
Feb 01 Javascript
js查找某元素中的所有图片地址的方法
Jan 16 Javascript
web前端设计师们常用的jQuery特效插件汇总
Dec 07 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
Jan 09 Javascript
JavaScript中getUTCSeconds()方法的使用详解
Jun 11 Javascript
jquery实现select选择框内容左右移动代码分享
Nov 21 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
Sep 03 Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
JavaScript对JSON数组简单排序操作示例
Jan 31 Javascript
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
微信小程序学习之自定义滚动弹窗
Dec 20 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
Aug 21 #Javascript
JavaScript 中的日期和时间及表示标准介绍
Aug 21 #Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
Aug 21 #Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
Aug 21 #Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
Aug 21 #Javascript
jquery.qrcode在线生成二维码使用示例
Aug 21 #Javascript
jquery设置控件位置的方法
Aug 21 #Javascript
You might like
Cannot modify header information错误解决方法
2008/10/08 PHP
PHP实现多条件查询实例代码
2010/07/17 PHP
PHP设计模式之解释器模式的深入解析
2013/06/13 PHP
浅谈php冒泡排序
2014/12/30 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
php之可变变量的实例详解
2017/09/12 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
js prototype截取字符串函数
2010/04/01 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
js获得鼠标的坐标值的方法
2013/03/13 Javascript
node.js使用require()函数加载模块
2014/11/26 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
JavaScript中Math对象的方法介绍
2017/01/05 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
2017/05/11 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
2018/08/16 Javascript
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
Python实现竖排打印传单手机号码易撕条
2015/03/16 Python
十条建议帮你提高Python编程效率
2016/02/16 Python
pycharm远程linux开发和调试代码的方法
2018/07/17 Python
Python 使用类写装饰器的小技巧
2018/09/30 Python
python打包生成的exe文件运行时提示缺少模块的解决方法
2018/10/31 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
利用python画出AUC曲线的实例
2020/02/28 Python
python/golang实现循环链表的示例代码
2020/09/14 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
大四本科生的自我评价
2013/12/30 职场文书
视光学专业自荐信
2014/06/24 职场文书
中专生自荐信
2014/06/25 职场文书
施工安全汇报材料
2014/08/17 职场文书
党员自我剖析材料
2014/08/31 职场文书
教师工作总结范文2014
2014/11/10 职场文书
关于成立领导小组的通知
2015/04/23 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS