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 相关文章推荐
javascript web页面刷新的方法收集
Jul 02 Javascript
javascript时区函数介绍
Sep 14 Javascript
谈谈关于JavaScript 中的 MVC 模式
Apr 11 Javascript
得到form下的所有的input的js代码
Nov 07 Javascript
javascript计时器事件使用详解
Jan 07 Javascript
jquery图片滚动放大代码分享(2)
Aug 28 Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 Javascript
微信小程序-拍照或选择图片并上传文件
Jan 06 Javascript
Vue 2.0的数据依赖实现原理代码简析
Jul 10 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
Dec 07 Javascript
JS使用new操作符创建对象的方法分析
May 30 Javascript
js实现随机抽奖
Mar 19 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查询域名状态whois的类
2006/11/25 PHP
smarty中先strip_tags过滤html标签后truncate截取文章运用
2010/10/25 PHP
解析file_get_contents模仿浏览器头(user_agent)获取数据
2013/06/27 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
JQuery UI皮肤定制
2009/07/27 Javascript
jquery 学习笔记一
2010/04/07 Javascript
javascript中普通函数的使用介绍
2013/12/19 Javascript
基于javascript实现彩票随机数生成(简单版)
2020/04/17 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例
2016/12/30 NodeJs
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
对angularJs中2种自定义服务的实例讲解
2018/09/30 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
2019/04/09 Javascript
JavaScript实现滑块验证解锁
2021/01/07 Javascript
vue 中this.$set 动态绑定数据的案例讲解
2021/01/29 Vue.js
python实现rest请求api示例
2014/04/22 Python
Python实现把回车符\r\n转换成\n
2015/04/23 Python
深入理解python对json的操作总结
2017/01/05 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
PyCharm License Activation激活码失效问题的解决方法(图文详解)
2020/03/12 Python
美团网旗下网上订餐平台:美团外卖
2020/03/05 全球购物
机电一体化毕业生求职信
2013/11/02 职场文书
农业资源与环境专业自荐信范文
2013/12/30 职场文书
即将毕业大学生自荐信
2014/01/24 职场文书
承诺书样本
2014/08/30 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
会计师事务所实习证明
2014/11/16 职场文书
小学数学教学随笔
2015/08/14 职场文书
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技
Tomcat用户管理的优化配置详解
2022/03/31 Servers
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android
canvas 中如何实现物体的框选
2022/08/05 Javascript