仰天一笑(Ansonxuyu),专业从事软件定制开发、Web软件开发,网站建设,网络推广,APP开发,微博应用开发,微信应用开发,电子商务开发,物联网开发等技术。
互联网8年风雨,愿在此交朋识友,交流心得,分享技术知识(策划/研发/运营/推广/合作)!QQ:943530498


仰天一笑

昨日不悔,今日勿失,明日莫忧! —徐羽

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

方法一,利用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="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>
130 
131 
复制代码

 

 

在IE,FireFox,chrome都可以用,不过只判断图片文件的大小。

posted on 2012-07-05 13:52  仰天一笑  阅读(39500)  评论(4编辑  收藏  举报