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 相关文章推荐
动态加载js文件 document.createElement
Oct 14 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
jquery实现Ctrl+Enter提交表单的方法
Jul 21 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
Jul 28 Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 Javascript
基于jQuery实现中英文切换导航条效果
Sep 18 Javascript
微信小程序 五星评分的实现实例
Aug 04 Javascript
微信小程序实现星星评价效果
Nov 02 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
详解vue beforeRouteEnter 异步获取数据给实例问题
Aug 09 Javascript
详解Vue的七种传值方式
Feb 08 Vue.js
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
检查url链接是否已经有参数的php代码 添加 ? 或 &amp;
2010/02/09 PHP
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
PHP数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
根据分辩率调用不同的CSS.
2007/01/08 Javascript
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
常用Extjs工具:Extjs.util.Format使用方法
2012/03/22 Javascript
javascript打开word文档的方法
2014/04/16 Javascript
javascript实现根据3原色制作颜色选择器的方法
2015/07/17 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
2016/08/24 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
Javascript中 toFixed四舍六入方法
2017/08/21 Javascript
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
JS实现提示效果弹出及延迟隐藏的功能
2019/08/26 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
javascript Canvas动态粒子连线
2020/01/01 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
[07:25]DOTA2-DPC中国联赛2月5日Recap集锦
2021/03/11 DOTA
python实现飞机大战
2018/09/11 Python
Python使用Shelve保存对象方法总结
2019/01/28 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行?
2019/05/15 Python
解决Python列表字符不区分大小写的问题
2019/12/19 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
世界上最大的乐器零售商:Guitar Center
2017/11/07 全球购物
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
营业经理岗位职责
2013/11/10 职场文书
大学生自我评价范文分享
2014/02/21 职场文书
作风建设演讲稿
2014/05/23 职场文书
2014年劳动部工作总结
2014/12/11 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
文明礼仪倡议书
2015/04/28 职场文书
新学期感想
2015/08/10 职场文书