您的位置：首页 > Web前端 > JavaScript

javascript实现限制上传文件的大小

2013-05-08 11:21 405 查看
目录

基本思路

示例

[一]、基本思路

在FireFox、Chrome浏览器中可以根据document.getElementById(“id_file”).files[0].size 获取上传文件的大小（字节数），而IE浏览器中不支持该属性，只能借助<img>标签的dynsrc属性，来间接实现获取文件的大小（但需要同意ActiveX控件的运行）。

[二]、示例

测试代码：filesize-check.html

<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
3
<
head
>
4
<
meta
 
name
=
"DEscription"
 
contect
=
"my
code demo"
 
/>
5
<
meta
 
name
=
"Author"
 
contect
=
"Michael@www.micmiu.com"
 
/>
6
<
meta
 
http-equiv
=
"Content-Type"
 
content
=
"text/html;
charset=utf-8"
 
/>
7
<
title
>js
check file size @ www.micmiu.com</
title
>
8
</
head
>
9
<
body
>
10
<
img
 
id
=
"tempimg"
 
dynsrc
=
""
 
src
=
""
 
style
=
"display:none"
 
/>
11
<
input
 
type
=
"file"
 
name
=
"file"
 
id
=
"fileuploade"
 
size
=
"40"
 
/>
12
<
input
 
type
=
"button"
 
name
 
=
"check"
 
value
=
"checkfilesize"
onclick
=
"checkfile()"
/>
13
14
</
body
>
15
<
script
 
type
=
"text/javascript"
>
16
var
maxsize = 2*1024*1024;//2M
17
var
errMsg = "上传的附件文件不能超过2M！！！";
18
var
tipMsg = "您的浏览器暂不支持计算上传文件的大小，确保上传文件不要超过2M，建议使用IE、FireFox、Chrome浏览器。";
19
var
browserCfg = {};
20
var
ua = window.navigator.userAgent;
21
if
(ua.indexOf("MSIE")>=1){
22
browserCfg.ie
= true;
23
}else
if(ua.indexOf("Firefox")>=1){
24
browserCfg.firefox
= true;
25
}else
if(ua.indexOf("Chrome")>=1){
26
browserCfg.chrome
= true;
27
}
28
function
checkfile(){
29
try{
30
var
obj_file = document.getElementById("fileuploade");
31
if(obj_file.value==""){
32
alert("请先选择上传文件");
33
return;
34
}
35
var
filesize = 0;
36
if(browserCfg.firefox
|| browserCfg.chrome ){
37
filesize
= obj_file.files[0].size;
38
}else
if(browserCfg.ie){
39
var
obj_img = document.getElementById('tempimg');
40
obj_img.dynsrc=obj_file.value;
41
filesize
= obj_img.fileSize;
42
}else{
43
alert(tipMsg);
44
return;
45
}
46
if(filesize==-1){
47
alert(tipMsg);
48
return;
49
}else
if(filesize>maxsize){
50
alert(errMsg);
51
return;
52
}else{
53
alert("文件大小符合要求");
54
return;
55
}
56
}catch(e){
57
alert(e);
58
}
59
}
60
</
script
>
61
</
html
>
测试上传的文件大小：





各浏览器中的效果如下：

IE8：









FF(11.0)：





Chrome(19.0.1084.56 m)：





—————–

转载自micmiu – 大大的技术 | 小小的生活[ http://www.micmiu.com/ ]

本文链接地址: http://www.micmiu.com/lang/javascript/js-check-filesize/
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航