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 相关文章推荐
关于 byval 与 byref 的区别分析总结
Oct 08 Javascript
js跨域和ajax 跨域问题的实现思路
Sep 05 Javascript
防止文件缓存的js代码
Jan 10 Javascript
js仿百度贴吧验证码特效实例代码
Jan 16 Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 Javascript
JS来动态的修改url实现对url的增删查改
Sep 05 Javascript
JavaScript实现关键字高亮功能
Nov 12 Javascript
Vue2.x中的父子组件相互通信的实现方法
May 02 Javascript
浅析Vue自定义组件的v-model
Nov 26 Javascript
关于vue-router的那些事儿
May 23 Javascript
layui从数据库中获取复选框的值并默认选中方法
Aug 15 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
关于使用key/value数据库redis和TTSERVER的心得体会
2013/06/28 PHP
微信公众号点击菜单即可打开并登录微站的实现方法
2014/11/14 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
实例讲解php数据访问
2016/05/09 PHP
PHP使用XMLWriter读写xml文件操作详解
2018/07/31 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
window.showModalDialog使用手册
2007/01/11 Javascript
关于jQuery object and DOM element
2013/04/15 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
Js 去掉字符串中的空格(实现代码)
2013/11/19 Javascript
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
详解微信小程序开发之下拉刷新 上拉加载
2016/11/24 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
javascript正则表达式模糊匹配IP地址功能示例
2017/01/06 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
2017/04/06 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
JavaScript实现二维坐标点排序效果
2017/07/18 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
2019/08/04 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
一次微信小程序内地图的使用实战记录
2019/09/09 Javascript
如何基于viewport vm适配移动端页面
2020/11/13 Javascript
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
python学习之第三方包安装方法(两种方法)
2015/07/30 Python
Python编程中归并排序算法的实现步骤详解
2016/05/04 Python
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
电子工程求职信
2014/07/17 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
2014幼儿园小班工作总结
2014/11/10 职场文书
新教师2015年度工作总结
2015/07/22 职场文书