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 相关文章推荐
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
jQuery控制cookie过期时间的方法
Apr 07 Javascript
JavaScript实现随机替换图片的方法
Apr 16 Javascript
js实现鼠标划过给div加透明度的方法
May 25 Javascript
jQuery层次选择器用法示例
Sep 09 Javascript
微信小程序图表插件(wx-charts)实例代码
Jan 17 Javascript
Angular 4依赖注入学习教程之简介(一)
Jun 04 Javascript
underscore之Collections_动力节点Java学院整理
Jul 10 Javascript
JS利用prototype给类添加方法操作详解
Jun 21 Javascript
Vue实现页面添加水印功能
Nov 09 Javascript
jQuery实现二级导航菜单的示例
Sep 30 jQuery
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
PHP文件读写操作之文件写入代码
2011/01/13 PHP
php如何解决无法上传大于8M的文件问题
2014/03/10 PHP
php 实现进制相互转换
2016/04/07 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
javascript高级模块化require.js的具体使用方法
2017/10/31 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
vue大型项目之分模块运行/打包的实现
2020/09/21 Javascript
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
python并发编程之多进程、多线程、异步和协程详解
2016/10/28 Python
Python爬虫实例扒取2345天气预报
2018/03/04 Python
win8下python3.4安装和环境配置图文教程
2018/07/31 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
Python 调用PIL库失败的解决方法
2019/01/08 Python
python Django编写接口并用Jmeter测试的方法
2019/07/31 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
Python实现列表中非负数保留,负数转化为指定的数值方式
2020/06/04 Python
美国知名的时尚购物网站:Anthropologie
2016/12/22 全球购物
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
在C#中如何实现多态
2014/07/02 面试题
应届生个人求职信模板
2013/11/26 职场文书
金融管理专业毕业生求职信
2014/03/12 职场文书
班长演讲稿范文
2014/04/24 职场文书
环保倡议书50字
2014/05/15 职场文书
2014年领班工作总结
2014/11/25 职场文书
初中学生操行评语
2014/12/26 职场文书
学校中秋节活动总结
2015/03/23 职场文书
2015年前台个人工作总结
2015/04/03 职场文书
python实现的web监控系统
2021/04/27 Python
MySQL安装后默认自带数据库的作用详解
2021/04/27 MySQL