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 相关文章推荐
Firefox window.close()的使用注意事项
Apr 11 Javascript
jquery 事件对象属性小结
Apr 27 Javascript
JavaScript中的pow()方法使用详解
Jun 15 Javascript
js实现Select头像选择实时预览代码
Aug 17 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
js捕捉键盘事件和按键键值的方法
Oct 10 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
Feb 05 Javascript
weui框架实现上传、预览和删除图片功能代码
Aug 24 Javascript
javascript实现切割轮播效果
Nov 28 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 Javascript
Webpack5正式发布,有哪些新特性
Oct 12 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 spl_autoload_register实现自动加载研究
2011/12/06 PHP
ThinkPHP通过AJAX返回JSON的两种实现方法
2014/12/18 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
2013/12/31 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
2015/08/24 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
Vue.js双向绑定操作技巧(初级入门)
2016/12/27 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
js通过Date对象实现倒计时动画效果
2017/10/27 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
Python使用struct处理二进制的实例详解
2017/09/11 Python
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
Python使用base64模块进行二进制数据编码详解
2018/01/11 Python
pandas 将索引值相加的方法
2018/11/15 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
Python实现屏幕录制功能的代码
2020/03/02 Python
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
MATCHESFASHION.COM法国官网:英国奢侈品零售商
2018/01/04 全球购物
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
介绍一下except的用法和作用
2015/01/22 面试题
中专生自我鉴定
2013/12/17 职场文书
《列夫托尔斯泰》教学反思
2014/02/10 职场文书
学生党员的自我评价范文
2014/03/01 职场文书
2014年机关工会工作总结
2014/12/19 职场文书
五好家庭申报材料
2014/12/20 职场文书
贷款承诺书
2015/01/20 职场文书
机动车交通事故协议书
2015/01/29 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
运动会主持人开幕词
2016/03/04 职场文书