js限制上传文件的大小

最新推荐文章于 2022-06-21 11:24:07 发布

honder试试

最新推荐文章于 2022-06-21 11:24:07 发布

阅读量2.6k

点赞数

分类专栏： java SSH学习

本文链接：https://blog.csdn.net/ITzhanghao/article/details/49471117

版权

java 同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

SSH学习

16 篇文章 0 订阅

订阅专栏

最近使用到一个文件上传功能，发现恶意上传一个2G文件时，后台处理响应较慢，遂想到能否使用js来进行客户端的验证。但查阅网上多处资料，均使用 ActiveXObject("Scripting.FileSystemObject"); 的方法，该方法需要将Internet选项中安全级别提高，启用一个系统本身不推荐的选项，会出现如下非常不友好的提示：

所以这边并没有用到，而是寻求其他方法。

这边新的思路是img标签中的dynsrc属性。

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

具体方法如下：

   Html代码   
   
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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()"/>
</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;
}
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>
测试上传的文件大小：

IE8：

Chrome(19.0.1084.56 m)：

FF(11.0)：

网上找到这种方法后进行上传测试，IE8 报错Error:无法设置dynsrc属性。拒绝访问.如果用大写的 DYNSRC，就不会报错，但是后面的fileSize就不能用了

方法二：

完整代码如下，：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>testImageSize.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    

<script type="text/javascript">

function fileChange(target){
//检测上传文件的类型
var imgName = document.all.up_file.value;
     var ext,idx;
    if (imgName == ''){
       document.all.submit_upload.disabled=true;
        alert("请选择需要上传的文件!");
        return;
    } else {
        idx = imgName.lastIndexOf(".");
        if (idx != -1){
            ext = imgName.substr(idx+1).toUpperCase();
            ext = ext.toLowerCase( );
           // alert("ext="+ext);
            if (ext != 'jpg' && ext != 'png' && ext != 'jpeg' && ext != 'gif'){
              document.all.submit_upload.disabled=true;
                alert("只能上传.jpg .png .jpeg .gif类型的文件!");
                return;
            }
        } else {
          document.all.submit_upload.disabled=true;
           alert("只能上传.jpg .png .jpeg .gif类型的文件!");
            return;
        }
    }

    //检测上传文件的大小
    var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
    var fileSize = 0;
    if (isIE && !target.files){
        var filePath = target.value;
        var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
        var file = fileSystem.GetFile (filePath);
        fileSize = file.Size;
    } else {
        fileSize = target.files[0].size;
    }

    var size = fileSize / 1024*1024;

    if(size>(1024*2*1024)){
    document.all.submit_upload.disabled=true;
        alert("文件大小不能超过2M");
    }else{
    document.all.submit_upload.disabled=false;
    }
}
</script>
</head>
<body>
<input type="file" id="up_file" name="up_file" οnchange="fileChange(this);" />
<input id="submit_upload" type="submit" class="load-btn" value="上传" disabled />
</body>
</html>

honder试试

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js限制上传文件的大小

最近使用到一个文件上传功能，发现恶意上传一个2G文件时，后台处理响应较慢，遂想到能否使用js来进行客户端的验证。但查阅网上多处资料，均使用 ActiveXObject("Scripting.FileSystemObject"); 的方法，该方法需要将Internet选项中安全级别提高，启用一个系统本身不推荐的选项，会出现如下非常不友好的提示：所以这边并没有用到，而是寻求其
复制链接

扫一扫