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 相关文章推荐
[推荐]javascript 面向对象技术基础教程
Mar 03 Javascript
jQuery 创建Dom元素
May 07 Javascript
js 通用订单代码
Dec 23 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
Jun 13 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
Oct 15 Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 Javascript
bootstrap警告框使用方法解析
Jan 13 Javascript
Vue如何引入远程JS文件
Apr 20 Javascript
微信小程序 实现动态显示和隐藏某个控件
Apr 27 Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 Javascript
基于jQuery实现可编辑的表格
Dec 11 jQuery
Javascript地址引用代码实例解析
Feb 25 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 header()函数语法及使用代码
2013/11/04 PHP
CodeIgniter控制器之业务逻辑实例分析
2016/01/20 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
jQuery写fadeTo示例代码
2014/02/21 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
2015/03/09 Javascript
jquery实现可旋转可拖拽的文字效果代码
2016/01/27 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
Angular使用cli生成自定义文件、组件的方法
2018/09/04 Javascript
JS基于ES6新特性async await进行异步处理操作示例
2019/02/02 Javascript
详解webpack 最简打包结果分析
2019/02/20 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
Postman内建变量常用方法实例解析
2020/07/28 Javascript
微信小程序实现点击生成随机验证码
2020/09/09 Javascript
python zip文件 压缩
2008/12/24 Python
使用python获取CPU和内存信息的思路与实现(linux系统)
2014/01/03 Python
python中正则表达式的使用详解
2014/10/17 Python
简单讲解Python中的闭包
2015/08/11 Python
用Python实现随机森林算法的示例
2017/08/24 Python
python pycharm的安装及其使用
2019/10/11 Python
django有哪些好处和优点
2020/09/01 Python
CSS3 animation ? steps 函数详解
2019/08/30 HTML / CSS
HTML5事件方法全部汇总
2016/05/12 HTML / CSS
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
艺术节主持词
2014/04/02 职场文书
银行授权委托书格式
2014/10/10 职场文书
群众路线教育实践活动总结
2014/10/30 职场文书
2014年大学教师工作总结
2014/12/02 职场文书
电视新闻稿
2015/07/17 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书
Python如何识别银行卡卡号?
2021/06/10 Python
详解在OpenCV中如何使用图像像素
2022/03/03 Python