JS判断文件大小

阅读更多

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 " , "

" ); 
 54  msg = msg.replace( / \n / gi, "

" ); 
 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 = " " + 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 = ' '  
112       else  
113       str = ' '  
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 ="width: 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 ="width: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都可以用，不过只判断图片文件的大小。