JS获取文件大小方法小结


Posted in Javascript onDecember 08, 2015

本文实例总结了JS获取文件大小方法。分享给大家供大家参考,具体如下:

方法一,利用ActiveX控件实现:

<script type="text/javascript">
function getFileSize(filePath)
{
  var fso = new ActiveXObject("Scripting.FileSystemObject");
  alert("文件大小为:"+fso.GetFile(filePath).size);
}
</script>
<body>
<INPUT TYPE="file" NAME="file" SIZE="30" onchange="getFileSize(this.value);">
</body>

这个方法在IE可以用,不足之处会有安全提示,把文件名改为.hta则会屏蔽掉安全提示。

方法二,利用img的dynsrc属性:

代码:

<script type="text/javascript">
function getFileSize(filePath)
{
  var image=new Image();
  image.dynsrc=filePath;
  alert(image.fileSize);
}
</script>
<body>
<INPUT TYPE="file" NAME="file" SIZE="30" onchange="getFileSize(this.value)">
</body>

这个方法在IE6可以用,在IE7,IE8,Firefox,chrome不能用。

方法三,利用img的fileSize:

代码:

<script language=javascript> 
var ImgObj=new Image(); //建立一个图像对象 
var AllImgExt=".jpg|.jpeg|.gif|.bmp|.png|"//全部图片格式类型 
var FileObj,ImgFileSize,ImgWidth,ImgHeight,FileExt,ErrMsg,FileMsg,HasCheked,IsImg//全局变量 图片相关属性 
//以下为限制变量 
var AllowExt=".jpg|.gif|.doc|.txt|" //允许上传的文件类型 ?为无限制 每个扩展名后边要加一个"|" 小写字母表示 
//var AllowExt=0 
var AllowImgFileSize=70;  //允许上传图片文件的大小 0为无限制 单位:KB 
var AllowImgWidth=500;   //允许上传的图片的宽度 ?为无限制 单位:px(像素) 
var AllowImgHeight=500;   //允许上传的图片的高度 ?为无限制 单位:px(像素) 
HasChecked=false; 
function CheckProperty(obj)  //检测图像属性 
{ 
 FileObj=obj; 
 if(ErrMsg!="")   //检测是否为正确的图像文件 返回出错信息并重置 
 { 
   ShowMsg(ErrMsg,false); 
   return false;   //返回 
 } 
 if(ImgObj.readyState!="complete") //如果图像是未加载完成进行循环检测 
 { 
   setTimeout("CheckProperty(FileObj)",500); 
   return false; 
 } 
 ImgFileSize=Math.round(ImgObj.fileSize/1024*100)/100;//取得图片文件的大小 
 ImgWidth=ImgObj.width   //取得图片的宽度 
 ImgHeight=ImgObj.height;  //取得图片的高度 
 FileMsg="\n图片大小:"+ImgWidth+"*"+ImgHeight+"px"; 
 FileMsg=FileMsg+"\n图片文件大小:"+ImgFileSize+"Kb"; 
 FileMsg=FileMsg+"\n图片文件扩展名:"+FileExt; 
 if(AllowImgWidth!=0&&AllowImgWidth<ImgWidth) 
   ErrMsg=ErrMsg+"\n图片宽度超过限制。请上传宽度小于"+AllowImgWidth+"px的文件,当前图片宽度为"+ImgWidth+"px"; 
 if(AllowImgHeight!=0&&AllowImgHeight<ImgHeight) 
   ErrMsg=ErrMsg+"\n图片高度超过限制。请上传高度小于"+AllowImgHeight+"px的文件,当前图片高度为"+ImgHeight+"px"; 
 if(AllowImgFileSize!=0&&AllowImgFileSize<ImgFileSize) 
   ErrMsg=ErrMsg+"\n图片文件大小超过限制。请上传小于"+AllowImgFileSize+"KB的文件,当前文件大小为"+ImgFileSize+"KB"; 
 if(ErrMsg!="") 
   ShowMsg(ErrMsg,false); 
 else 
   ShowMsg(FileMsg,true); 
 } 
 ImgObj.onerror=function(){ErrMsg='\n图片格式不正确或者图片已损坏!'} 
 function ShowMsg(msg,tf) //显示提示信息 tf=true 显示文件信息 tf=false 显示错误信息 msg-信息内容 
 { 
 msg=msg.replace("\n","<li>"); 
 msg=msg.replace(/\n/gi,"<li>"); 
 if(!tf) 
 { 
   document.all.UploadButton.disabled=true; 
   FileObj.outerHTML=FileObj.outerHTML; 
   MsgList.innerHTML=msg; 
   HasChecked=false; 
 } 
 else 
 { 
   document.all.UploadButton.disabled=false; 
   if(IsImg) 
    PreviewImg.innerHTML="<img src='"+ImgObj.src+"' width='60' height='60'>" 
   else 
    PreviewImg.innerHTML="非图片文件"; 
    MsgList.innerHTML=msg; 
    HasChecked=true; 
 } 
} 
function CheckExt(obj) 
{ 
 ErrMsg=""; 
 FileMsg=""; 
 FileObj=obj; 
 IsImg=false; 
 HasChecked=false; 
 PreviewImg.innerHTML="预览区"; 
 if(obj.value=="")return false; 
 MsgList.innerHTML="文件信息处理中..."; 
 document.all.UploadButton.disabled=true; 
 FileExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase(); 
 if(AllowExt!=0&&AllowExt.indexOf(FileExt+"|")==-1) //判断文件类型是否允许上传 
 { 
   ErrMsg="\n该文件类型不允许上传。请上传 "+AllowExt+" 类型的文件,当前文件类型为"+FileExt; 
   ShowMsg(ErrMsg,false); 
   return false; 
 } 
 if(AllImgExt.indexOf(FileExt+"|")!=-1)  //如果图片文件,则进行图片信息处理 
 { 
   IsImg=true; 
   ImgObj.src=obj.value; 
   CheckProperty(obj); 
   return false; 
 } 
 else 
 { 
   FileMsg="\n文件扩展名:"+FileExt; 
   ShowMsg(FileMsg,true); 
 } 
 
 } 
 function SwitchUpType(tf) 
 { 
   if(tf) 
   str='<input type="file" name="file1" onchange="CheckExt(this)" style="width:180px;">' 
   else 
   str='<input type="text" name="file1" onblur="CheckExt(this)" style="width:180px;">' 
   document.all.file1.outerHTML=str; 
   document.all.UploadButton.disabled=true; 
   MsgList.innerHTML=""; 
 } 
 </script> 
 <form enctype="multipart/form-data" method="POST" onsubmit="return HasChecked;"> 
 <fieldset style="width: 372; height: 60;padding:2px;"> 
 <legend><font color="#FF0000">图片来源</font></legend> 
 <input type="radio" name="radio1" checked onclick="SwitchUpType(true);">本地<input type="radio" name="radio1" onclick="SwitchUpType(false);">远程:<input type="file" name="file1" onchange="CheckExt(this)" style="width:180px;"> <input type="submit" id="UploadButton" value="开始上传" disabled> 
 <div style="border:1 solid #808080;background:#E0E0E0;width100%;height:20px;color:#606060;padding:5px;"> 
 <table border="0"><tr><td width="60" id="PreviewImg">预览区</td><td id="MsgList" valign="top"></td></tr></table> 
 </div> 
 </fieldset> 
 </form>

在IE,FireFox,chrome都可以用,不过只判断图片文件的大小。

附:js判断文件格式及大小

//判断照片大小
function getPhotoSize(obj){
  photoExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();//获得文件后缀名
  if(photoExt!='.jpg'){
    alert("请上传后缀名为jpg的照片!");
    return false;
  }
  var fileSize = 0;
  var isIE = /msie/i.test(navigator.userAgent) && !window.opera;      
  if (isIE && !obj.files) {     
     var filePath = obj.value;      
     var fileSystem = new ActiveXObject("Scripting.FileSystemObject");  
     var file = fileSystem.GetFile (filePath);        
     fileSize = file.Size;     
  }else { 
     fileSize = obj.files[0].size;   
  } 
  fileSize=Math.round(fileSize/1024*100)/100; //单位为KB
  if(fileSize>=10){
    alert("照片最大尺寸为10KB,请重新上传!");
    return false;
  }
}

jsp页面:

<input type="file" id="imgFile" name="upload" style="width:150px;" onchange="getPhotoSize(this)"/>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js trim函数 去空格函数与正则集锦
Nov 20 Javascript
js 弹出框 替代浏览器的弹出框
Oct 29 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
Feb 05 Javascript
键盘KeyCode值列表汇总
Nov 26 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
Feb 18 Javascript
浅析Jquery操作select
Dec 13 Javascript
BootStrapTable服务器分页实例解析
Dec 20 Javascript
详解如何使用babel进行es6文件的编译
May 29 Javascript
Vue.js组件间通信方式总结【推荐】
Nov 23 Javascript
javascript实现计算指定范围内的质数示例
Dec 29 Javascript
微信小程序wx.request的简单封装
Nov 13 Javascript
详解Angular Karma测试的持续集成实践
Nov 15 Javascript
js+ajax实现获取文件大小的方法
Dec 08 #Javascript
JS表格组件神器bootstrap table详解(基础版)
Dec 08 #Javascript
详解js中构造流程图的核心技术JsPlumb(2)
Dec 08 #Javascript
详解js中构造流程图的核心技术JsPlumb
Dec 08 #Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 #Javascript
jQuery实现的简单提示信息插件
Dec 08 #Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 #Javascript
You might like
discuz 首页四格:最新话题+最新回复+热门话题+精华文章插件
2007/08/19 PHP
laravel-admin的图片删除实例
2019/09/30 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
jquery使用经验小结
2015/05/20 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
2016/06/13 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
javascript轮播图算法
2016/10/21 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
2017/01/17 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
package.json配置文件构成详解
2019/08/27 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
taro小程序添加骨架屏的实现代码
2019/11/15 Javascript
[01:38]女王驾到——至宝魔廷新尊技能&特效展示
2020/06/16 DOTA
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
通过Py2exe将自己的python程序打包成.exe/.app的方法
2018/05/26 Python
利用Python如何实现一个小说网站雏形
2018/11/23 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
Python多个装饰器的调用顺序实例解析
2020/05/22 Python
Python扫描端口的实现
2021/01/25 Python
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
瑞典快乐袜子:Happy Socks
2018/02/16 全球购物
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
澳大利亚先进的皮肤和激光诊所购物网站:Soho Skincare
2018/10/15 全球购物
Sisley法国希思黎中国官网:享誉全球的奢华植物美容品牌
2019/06/30 全球购物
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
培训楼经理岗位责任制
2014/02/10 职场文书
车辆工程专业求职信
2014/04/28 职场文书
村庄绿化方案
2014/05/07 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
董事长致辞
2015/07/29 职场文书
商场广播稿范文
2015/08/19 职场文书
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL