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 相关文章推荐
sina的lightbox效果。
Jan 09 Javascript
javascript下arguments,caller,callee,call,apply示例及理解
Dec 24 Javascript
js tab效果的实现代码
Dec 26 Javascript
JavaScript 拾碎[三] 使用className属性
Oct 16 Javascript
javascript中注册和移除事件的4种方式
Mar 20 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
Apr 25 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 Javascript
jQuery插件Validate实现自定义表单验证
Jan 18 Javascript
微信小程序开发(一) 微信登录流程详解
Jan 11 Javascript
js常用DOM方法详解
Feb 04 Javascript
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
AngularJS实现的根据数量与单价计算总价功能示例
Dec 26 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
一组PHP加密解密函数分享
2014/06/05 PHP
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
Extjs TriggerField在弹出窗口显示不出问题的解决方法
2010/01/08 Javascript
javascript,jquery闭包概念分析
2010/06/19 Javascript
jquery异步循环获取功能实现代码
2010/09/19 Javascript
Javascript 面向对象(三)接口代码
2012/05/23 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
2014/05/11 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
AngularJS ng-bind-template 指令详解
2016/07/30 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
TypeScript入门-接口
2017/03/30 Javascript
很棒的vue弹窗组件
2017/05/24 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
2018/01/31 Javascript
TypeScript基础入门教程之三重斜线指令详解
2018/10/22 Javascript
js实现动态增加文件域表单功能
2018/10/22 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019/05/31 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
2019/08/12 Javascript
举例讲解Python中装饰器的用法
2015/04/27 Python
使用python加密自己的密码
2015/08/04 Python
python 写的一个爬虫程序源码
2016/02/28 Python
Python深度优先算法生成迷宫
2018/01/22 Python
详解用python写网络爬虫-爬取新浪微博评论
2019/05/10 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
美国最大的农村生活方式零售店:Tractor Supply Company(TSC)
2017/05/15 全球购物
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
贯彻学习两会心得体会范文
2014/03/17 职场文书
安全宣传标语口号
2014/06/06 职场文书
创先争优公开承诺书
2014/08/30 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
九九重阳节致辞
2015/07/31 职场文书
银行客户经理培训心得体会
2016/01/09 职场文书