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解决IE与FireFox下createElement方法的差异
Nov 14 Javascript
jquery实现当滑动到一定位置时固定效果
Jun 17 Javascript
JS绘制生成花瓣效果的方法
Aug 05 Javascript
js实现的页面矩阵图形变换特效
Jan 26 Javascript
Angularjs 创建可复用组件实例代码
Oct 09 Javascript
DOM 事件的深入浅出(一)
Dec 05 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
angularjs下拉框空白的解决办法
Jun 20 Javascript
详解如何在vue项目中使用lodop打印插件
Sep 27 Javascript
Vue项目服务器部署之子目录部署方法
May 12 Javascript
vue中keep-alive组件的入门使用教程
Jun 06 Javascript
JavaScript实现旋转木马轮播图
Mar 16 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 可阅读随机字符串代码
2010/05/26 PHP
PHP mb_convert_encoding文字编码的转换函数介绍
2011/11/10 PHP
Laravel框架创建路由的方法详解
2019/09/04 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
2007/02/05 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
GRID拖拽行的实例代码
2013/07/18 Javascript
不使用jquery实现js打字效果示例分享
2014/01/19 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
jQuery中选择器的基础使用教程
2016/05/23 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
详解Bootstrap各式各样的按钮(推荐)
2016/12/13 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
2017/05/08 Javascript
vue 请求后台数据的实例代码
2017/06/22 Javascript
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
AngularJS下$http服务Post方法传递json参数的实例
2018/03/29 Javascript
Vue点击切换颜色的方法
2018/09/13 Javascript
cdn模式下vue的基本用法详解
2018/10/07 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
python使用fork实现守护进程的方法
2017/11/16 Python
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
对Python中列表和数组的赋值,浅拷贝和深拷贝的实例讲解
2018/06/28 Python
python绘制直线的方法
2018/06/30 Python
基于Python的图像阈值化分割(迭代法)
2020/11/20 Python
利用HTML5的新特点实现图片文件异步上传
2014/05/29 HTML / CSS
怀旧收藏品和经典纪念品:Betty’s Attic
2018/08/29 全球购物
PHP如何与mysql建立链接
2013/05/05 面试题
建筑项目策划书
2014/01/13 职场文书
公务员转正鉴定材料
2014/02/11 职场文书
小学生感恩演讲稿
2014/04/25 职场文书
委托书格式要求
2015/01/28 职场文书
报名委托书
2015/01/29 职场文书
Golang Web 框架Iris安装部署
2022/08/14 Python