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 相关文章推荐
双击滚屏-常用推荐
Nov 29 Javascript
用javascript实现分割提取页面所需内容
May 09 Javascript
关于javascript document.createDocumentFragment()
Apr 04 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
Apr 04 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
Jun 08 Javascript
Boostrap实现的登录界面实例代码
Oct 09 Javascript
浅谈react 同构之样式直出
Nov 07 Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 Javascript
vue如何实现动态加载脚本
Feb 05 Javascript
浅析JavaScript 函数防抖和节流
Jul 13 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
php使用glob函数快速查询指定目录文件的方法
2014/11/15 PHP
php中静态类与静态变量用法的区别分析
2015/01/15 PHP
PHP使用PHPExcel删除Excel单元格指定列的方法
2016/07/06 PHP
PHP jQuery+Ajax结合写批量删除功能
2017/05/19 PHP
PHP7下协程的实现方法详解
2017/12/17 PHP
ExtJS GTGrid 简单用户管理
2009/07/01 Javascript
js控制页面控件隐藏显示的两种方法介绍
2013/10/09 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
2013/12/16 Javascript
在JavaScript中访问字符串的子串
2015/07/07 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
js获取新浪天气接口的实现代码
2016/06/06 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
Vue中使用Sortable的示例代码
2018/04/07 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
javascript设计模式之装饰者模式
2020/01/30 Javascript
vue-quill-editor的使用及个性化定制操作
2020/08/04 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
[02:56]DOTA2亚洲邀请赛 VG出场战队巡礼
2015/02/07 DOTA
python选择排序算法的实现代码
2013/11/21 Python
Python获取服务器信息的最简单实现方法
2015/03/05 Python
Django学习笔记之Class-Based-View
2017/02/15 Python
Python中模块string.py详解
2017/03/12 Python
pandas值替换方法
2018/07/10 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
Python实现某论坛自动签到功能
2019/08/20 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
中海讯通笔试题
2015/09/15 面试题
以思科路由器为例你写下单臂路由的配置命令
2013/08/03 面试题
大三毕业自我鉴定
2014/01/15 职场文书
企业车辆管理制度
2014/01/24 职场文书
2014年房地产个人工作总结
2014/12/20 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
简单聊聊Vue中的计算属性和属性侦听
2021/10/05 Vue.js
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸