本文使用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>
这个方法在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>
这个方法在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="width:180px;">' 112 else 113 str='<input type="text" name="file1" onblur="CheckExt(this)" style="width: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="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>
