zoukankan      html  css  js  c++  java

  • JS获取文件大小

    方法一，利用ActiveX控件实现：

     

    复制代码
    代码
     1 <script type="text/javascript">    
     2 function getFileSize(filePath)    
     3 {    
     4    var fso = new ActiveXObject("Scripting.FileSystemObject");   
     5    alert("文件大小为："+fso.GetFile(filePath).size);    
     6 }    
     7 </script>    
     8 <body>   
     9 <INPUT TYPE="file" NAME="file" SIZE="30" onchange="getFileSize(this.value);">    
    10 </body>  
    11 
    12 
    复制代码

     

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

     

    方法二，利用img的dynsrc属性：

     

    复制代码
    代码
     1 <script type="text/javascript">      
     2 function getFileSize(filePath)      
     3 {      
     4    var image=new Image();      
     5    image.dynsrc=filePath;      
     6    alert(image.fileSize);      
     7 }      
     8 </script>      
     9 <body>      
    10 <INPUT TYPE="file" NAME="file" SIZE="30" onchange="getFileSize(this.value)">      
    11 </body>
    12 
    13 
    复制代码

     

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

     

    方法三，利用img的fileSize：

     

    复制代码
    代码
      1 <script language=javascript> 
      2 var ImgObj=new Image();      //建立一个图像对象 
      3 var AllImgExt=".jpg|.jpeg|.gif|.bmp|.png|"//全部图片格式类型 
      4 var FileObj,ImgFileSize,ImgWidth,ImgHeight,FileExt,ErrMsg,FileMsg,HasCheked,IsImg//全局变量 图片相关属性 
      5 //以下为限制变量 
      6 var AllowExt=".jpg|.gif|.doc|.txt|" //允许上传的文件类型 ?为无限制 每个扩展名后边要加一个"|" 小写字母表示 
      7 //var AllowExt=0 
      8 var AllowImgFileSize=70;    //允许上传图片文件的大小 0为无限制 单位：KB 
      9 var AllowImgWidth=500;      //允许上传的图片的宽度 ?为无限制 单位：px(像素) 
     10 var AllowImgHeight=500;      //允许上传的图片的高度 ?为无限制 单位：px(像素) 
     11 HasChecked=false; 
     12 function CheckProperty(obj)    //检测图像属性 
     13 { 
     14 FileObj=obj; 
     15 if(ErrMsg!="")      //检测是否为正确的图像文件 返回出错信息并重置 
     16 { 
     17     ShowMsg(ErrMsg,false); 
     18     return false;      //返回 
     19 } 
     20 
     21 if(ImgObj.readyState!="complete") //如果图像是未加载完成进行循环检测 
     22 { 
     23     setTimeout("CheckProperty(FileObj)",500); 
     24     return false; 
     25 } 
     26 
     27 ImgFileSize=Math.round(ImgObj.fileSize/1024*100)/100;//取得图片文件的大小 
     28 ImgWidth=ImgObj.width      //取得图片的宽度 
     29 ImgHeight=ImgObj.height;    //取得图片的高度 
     30 FileMsg="\n图片大小:"+ImgWidth+"*"+ImgHeight+"px"; 
     31 FileMsg=FileMsg+"\n图片文件大小:"+ImgFileSize+"Kb"; 
     32 FileMsg=FileMsg+"\n图片文件扩展名:"+FileExt; 
     33 
     34 if(AllowImgWidth!=0&&AllowImgWidth<ImgWidth) 
     35     ErrMsg=ErrMsg+"\n图片宽度超过限制。请上传宽度小于"+AllowImgWidth+"px的文件，当前图片宽度为"+ImgWidth+"px"; 
     36 
     37 if(AllowImgHeight!=0&&AllowImgHeight<ImgHeight) 
     38     ErrMsg=ErrMsg+"\n图片高度超过限制。请上传高度小于"+AllowImgHeight+"px的文件，当前图片高度为"+ImgHeight+"px"; 
     39 
     40 if(AllowImgFileSize!=0&&AllowImgFileSize<ImgFileSize) 
     41     ErrMsg=ErrMsg+"\n图片文件大小超过限制。请上传小于"+AllowImgFileSize+"KB的文件，当前文件大小为"+ImgFileSize+"KB"; 
     42 
     43 if(ErrMsg!="") 
     44     ShowMsg(ErrMsg,false); 
     45 else 
     46     ShowMsg(FileMsg,true); 
     47 } 
     48 
     49 ImgObj.onerror=function(){ErrMsg='\n图片格式不正确或者图片已损坏!'} 
     50 
     51 function ShowMsg(msg,tf) //显示提示信息 tf=true 显示文件信息 tf=false 显示错误信息 msg-信息内容 
     52 { 
     53 msg=msg.replace("\n","<li>"); 
     54 msg=msg.replace(/\n/gi,"<li>"); 
     55 if(!tf) 
     56 { 
     57     document.all.UploadButton.disabled=true; 
     58     FileObj.outerHTML=FileObj.outerHTML; 
     59     MsgList.innerHTML=msg; 
     60     HasChecked=false; 
     61 } 
     62 else 
     63 { 
     64     document.all.UploadButton.disabled=false; 
     65     if(IsImg) 
     66       PreviewImg.innerHTML="<img src='"+ImgObj.src+"' width='60' height='60'>" 
     67     else 
     68       PreviewImg.innerHTML="非图片文件"; 
     69     MsgList.innerHTML=msg; 
     70     HasChecked=true; 
     71 } 
     72 } 
     73 
     74 function CheckExt(obj) 
     75 { 
     76 ErrMsg=""; 
     77 FileMsg=""; 
     78 FileObj=obj; 
     79 IsImg=false; 
     80 HasChecked=false; 
     81 PreviewImg.innerHTML="预览区"; 
     82 if(obj.value=="")return false; 
     83 MsgList.innerHTML="文件信息处理中..."; 
     84 document.all.UploadButton.disabled=true; 
     85 FileExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase(); 
     86 if(AllowExt!=0&&AllowExt.indexOf(FileExt+"|")==-1) //判断文件类型是否允许上传 
     87 { 
     88     ErrMsg="\n该文件类型不允许上传。请上传 "+AllowExt+" 类型的文件，当前文件类型为"+FileExt; 
     89     ShowMsg(ErrMsg,false); 
     90     return false; 
     91 } 
     92 
     93 if(AllImgExt.indexOf(FileExt+"|")!=-1)    //如果图片文件，则进行图片信息处理 
     94 { 
     95     IsImg=true; 
     96     ImgObj.src=obj.value; 
     97     CheckProperty(obj); 
     98     return false; 
     99 } 
    100 else 
    101 { 
    102     FileMsg="\n文件扩展名:"+FileExt; 
    103     ShowMsg(FileMsg,true); 
    104 } 
    105 
    106 } 
    107 
    108 function SwitchUpType(tf) 
    109 { 
    110     if(tf) 
    111      str='<input type="file" name="file1" onchange="CheckExt(this)" style="180px;">' 
    112     else 
    113      str='<input type="text" name="file1" onblur="CheckExt(this)" style="180px;">' 
    114     document.all.file1.outerHTML=str; 
    115     document.all.UploadButton.disabled=true; 
    116     MsgList.innerHTML=""; 
    117 } 
    118 
    119 </script> 
    120 <form enctype="multipart/form-data" method="POST" onsubmit="return HasChecked;"> 
    121 <fieldset style=" 372; height: 60;padding:2px;"> 
    122 <legend><font color="#FF0000">图片来源</font></legend> 
    123 <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="180px;"> <input type="submit" id="UploadButton" value="开始上传" disabled> 
    124 
    125 <div style="border:1 solid #808080;background:#E0E0E0;width100%;height:20px;color:#606060;padding:5px;"> 
    126 <table border="0"><tr><td width="60" id="PreviewImg">预览区</td><td id="MsgList" valign="top"></td></tr></table> 
    127 </div> 
    128 </fieldset> 
    129 </form>
    130 
    131 
    复制代码

     

     

    在IE，FireFox，chrome都可以用，不过只判断图片文件的大小。
  • 相关阅读:
    嫁给程序员1314的好处
    TCP/IP、Http、Socket、XMPP-从入门到深入
    Redis集群案例与场景分析
    Java程序片段
    Spring Security（08）——intercept-url配置
    python virtualenv virtualenvwrapper
    django 删除表后如何恢复
    mysql行转列，单列转多行
    mysql开发之join语句学习
    django前后端数据传输学习记录
  • 原文地址：https://www.cnblogs.com/skylaugh/p/2577702.html
Copyright © 2011-2022 走看看