js验证上传图片大小

最新推荐文章于 2021-01-14 14:01:28 发布

guiyichen

最新推荐文章于 2021-01-14 14:01:28 发布

阅读量86

点赞数

文章标签： xhtml javascript 前端 ViewUI

本文链接：https://blog.csdn.net/guiyichen/article/details/88329543

版权

[size=large]
前端上传图片时，我们大多选择使用写好的组件来上传图片；但在应用过程中，有些框架就没有提供判断图片大小的方法，那么久需要我们自己用js实现。

针对浏览器内核的不同，我们判断图片大小的方法也不一样；所以，下面的代码可以应用在大多数市场份额的浏览器上。

大多数的验证并不是读取图片后判断其大小，而是用一种简便巧妙的方法读取文件所在本地系统中的大小属性。
下面看代码示例：
[/size]


<html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
    <meta name="DEscription" contect="my code demo" />  
    <meta name="Author" contect="Michael@www.micmiu.com" />  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>js check file size @ www.micmiu.com</title>  
    </head>  
    <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="checkfile()"/>

[size=large]
记住上面表单的两个id，tempimg 和 fileuploade 后面我们将要使用这两个id
[/size]


</body>  
    <script type="text/javascript">  
        var maxsize = 2*1024*1024;//2M  
        var errMsg = "上传的附件文件不能超过2M！！！";  
        var tipMsg = "您的浏览器暂不支持计算上传文件的大小，确保上传文件不要超过2M，建议使用IE、FireFox、Chrome浏览器。";  
        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;  
        }else {//其他浏览器大多是跟火狐一样的内核
            browserCfg.firefox = true;  
        }  
        function checkfile(){  
            try{  
                var obj_file = document.getElementById("fileuploade");  
                if(obj_file.value==""){  
                    alert("请先选择上传文件");  
                    return;  
                }  
                var filesize = 0;  
                if(browserCfg.firefox || browserCfg.chrome ){  
                    filesize = obj_file.files[0].size;  
                }else if(browserCfg.ie){  
                    var obj_img = document.getElementById('tempimg');  
                    obj_img.dynsrc=obj_file.value;  
                    filesize = obj_img.fileSize;  
                }else{  
                    alert(tipMsg);  
                return;  
                }  
                if(filesize==-1){  
                    alert(tipMsg);  
                    return;  
                }else if(filesize>maxsize){  
                    alert(errMsg);  
                    return;  
                }else{  
                    alert("文件大小符合要求");  
                    return;  
                }  
            }catch(e){  
                alert(e);  
            }  
        }  
    </script>  
</html>