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

[转]javascript实现限制上传文件的大​​小

2013-11-27 15:28 162 查看
本文转自:http://www.micmiu.com/lang/javascript/js-check-filesize/

目录

基本思路

示例

[一]、基本思路

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

[二]、示例

测试代码：filesize-check.html

1
<!DOCTYPE htmlPUBLIC "-//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/
                                            

                                        

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

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航