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 相关文章推荐
一个判断email合法性的函数[非正则]
Dec 09 Javascript
jquery uaMatch源代码
Feb 14 Javascript
web性能优化之javascript性能调优
Dec 28 Javascript
jquery操作select详解(取值,设置选中)
Feb 07 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
May 05 Javascript
JavaScript学习心得之概述
Jan 20 Javascript
javascript中动态函数用法实例分析
May 14 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
Jan 07 Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
Jun 12 Javascript
微信小程序组件之srcoll-view的详解
Oct 19 Javascript
基于element-ui组件手动实现单选和上传功能
Dec 06 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
正则表达式语法
2006/10/09 Javascript
php多文件上传实现代码
2014/02/20 PHP
ThinkPHP5.1框架数据库链接和增删改查操作示例
2019/08/03 PHP
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
Jquery对数组的操作技巧整理
2014/03/25 Javascript
jquery使用jxl插件导出excel示例
2014/04/14 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
javascript委托(Delegate)blur和focus用法实例分析
2015/05/26 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
第一次接触神奇的前端框架vue.js
2016/12/01 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
详解javascript立即执行函数表达式IIFE
2017/02/13 Javascript
JS返回顶部实例代码
2020/08/09 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
2018/04/23 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
element跨分页操作选择详解
2020/06/29 Javascript
jQuery实现购物车全功能
2021/01/11 jQuery
Python IDE PyCharm的基本快捷键和配置简介
2015/11/04 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
使用pycharm设置控制台不换行的操作方法
2019/01/19 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
在python中logger setlevel没有生效的解决
2020/02/21 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
详解Python中的编码问题(encoding与decode、str与bytes)
2020/09/30 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
总经理助理工作职责
2014/02/06 职场文书
《雨霖铃》听课反思
2014/02/13 职场文书
2014年加油站站长工作总结
2014/12/23 职场文书
结婚老公保证书
2015/02/26 职场文书
预备党员党支部意见
2015/06/02 职场文书
2015年中学体育教师工作总结
2015/10/23 职场文书
如何将numpy二维数组中的np.nan值替换为指定的值
2021/05/14 Python
阿里云服务器(windows)手动部署FTP站点详细教程
2022/08/05 Servers