JS获取文件大小,方法三,利用img的fileSize

分类 : .NET技术

方法一,利用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都可以用,不过只判断图片文件的大小。



相关文章

Bootstrap CSS:Bootstrap 代码



分类: .NET技术    访问() .NET技术    Web前端    JAVA开发    HTML基础    数据库    CSS基础    电脑知识   
CSS教程-web前端教程-免费教程
HTML教程-web前端教程-免费教程


分类

.NET技术 Web前端 JAVA开发 HTML基础 数据库 CSS基础 电脑知识

随机阅读

方正姚体繁体下载,方正姚体繁体字体迅雷下载包
Python2 和 Python3区别
css overflow(visible auto hidden sc
会声会影x7字幕制作教程 会声会影x7怎么添加字幕
oracle计算两个时间的差值(XX天XX时XX分XX秒)
Iframe嵌套HTML网页的用法?
Azure Cosmos DB (二) SQL API 操作
怎样使用iframe,在网页中插入页面
html中如果不用frame和iframe,还能怎么在一个区域里显示另
前端大文件上传代码,大文件上传


最新

div css隐藏内容样式方法
OPPO Reno3 Pro远程守护怎么使用?
XP系统里让IE支持多线程下载怎么设置
qq电脑管家温度检测在哪设置的? QQ电脑管家怎么测电脑的温度
win7禁用ie浏览器方法 win7怎么把桌面的ie隐藏
WinXP笔记本声卡驱动无法成功安装的解决方法
XP⁄Win7共享⁄连接打印机设置详细 xp怎
华为笔记本蓝屏错误0xcoooo428怎么解决
企业如何部署微软Windows 8? Windows 8的开发历史
华为mate9怎样解指纹密码?

推荐阅读

c语言中break语句的作用
vscode----vue中HTML代码tab键自动补全
undefined是什么意思啊
js 中日期 转换成时间戳 例如2013-08-30 转换为时间戳
DIV CSS字体(font-family)实现字体样式设置
C语言程序中break是什么意思?
C#语言之“string格式的日期时间字符串转为DateTime类型”
Mysql里表示布尔型的类型是什么
前端该怎么学?推荐一个学习路线!
sql中的modify语句,修改列属性

Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved 蜀ICP备15003849号-16