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

前端 JavaScript

创建时间:2016-10-30 23:21

字数:588 阅读:

在IE9及以下的版本
html5
兼容使用（不兼容IE10）

在IE9及以下的版本

可以通过如下方式检测需要上传文件的大小:

<body>
    <img id="tempimg" dynsrc="" src="" style="display:none" />
    <input type="file" name="file" id="fileuploade" size="40" />
    <input type="button" name ="check" value="checkfilesize" onclick="checksize()"/>

</body>
<script>
function checksize(){
    var obj_file = document.getElementById("fileuploade");
    var obj_img = document.getElementById('tempimg');
    obj_img.dynsrc=obj_file.value;
    var filesize = obj_img.fileSize;
    alert(filesize);
}
</script>

上面的代码的运行原理是把上传的文件模拟成图片，通过其fileSize属性获取其大小，而由于浏览器的安全策略，其几乎只能运行在本地打开此网页的情况。

html5

不仅支持获取上传文件大小，还支持多文件同时上传

<input type="file" multiple="multiple" onchange="checkinfo(this)">
<script>
function checkinfo(obj){
    var len = obj.files.length;
    var text="";
    for (var i =0 ; i < len ; i++){
            text += "文件:"+obj.files[i].name+" ,大小:"+obj.files[i].size+"字节\n";
    }
    alert(text);
}
</script>

兼容使用（不兼容IE10）

<img id="tempimg" dynsrc="" src="" style="display:none" />
<input type="file" name="uploadFile" id="uploadFile" onchange="checkfile(this)" />

<script type="text/javascript">
var maxsize = 10;
var maxsizelength = 10*1024*1024;
var errMsg = "上传的附件大小不能超过"+maxsize+"M！";
var tipMsg = "您的浏览器版本暂不支持检验上传文件的大小，请确保上传文件不要超过"+maxsize+"M！";
var  browserCfg = {};
var ua = window.navigator.userAgent;
if (ua.indexOf("MSIE")>=1){
    browserCfg.ie = true;
}else if(ua.indexOf("Firefox")>=1){
    browserCfg.firefox = true;
}else if(ua.indexOf("Chrome")>=1){
    browserCfg.chrome = true;
}

function checkfile(obj,num){
    try{
        var obj_file = obj;
        var filesize = 0;
        if(browserCfg.ie ){
            var obj_img = document.getElementById('tempimg');
            obj_img.dynsrc=obj_file.value;
            filesize = obj_img.fileSize;
        }else if(browserCfg.firefox || browserCfg.chrome || "ActiveXObject" in window ){ //包含IE11
            filesize = obj_file.files[0].size;
        }else{
            alert(tipMsg);
            return false;
        }
        if(filesize==-1){
            $('#uploadFile').prop('value' , '');
            alert(tipMsg);
            return false;
        }else if(filesize==0){
            $('#uploadFile').prop('value' , '');
            alert("上传附件内容不能为空！ 请重新填写！");
            return false;
        }else if(filesize>maxsizelength){
            $('#uploadFile').prop('value' , '');
            alert(errMsg);
            return false;
        }else{
            return true;
        }
    }catch(e){
        $('#uploadFile').prop('value' , '');
        alert("验证上传附件大小合法性失败！");
        return false;
    }
}
</script>

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 bin07280@qq.com