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

浏览数：43 / 时间：2015年06月08日

基本思路
示例

[一]、基本思路

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

[二]、示例

测试代码：filesize-check.html

  
    1
    <!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="[email protected]" />
  
    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>