hi,欢迎访问本站!
当前位置: 首页Web前端正文

js怎么获取上传文件的名称,格式以及大小

墨初 Web前端 735阅读

前端web上传文件时,需要在上传之前判断一下文件的基本信息,比如文件的大小,文件的类型等等。下面博文中73so博客就和大家说一说如何使用js代码来获取到文件的这些信息。

js获取上传文件类型的方法

示例代码:

<!--表单数据-->
<form name="form1" id="form1">
    <input type="file" id="btn_file" name="file"></input>
    <input type="button" id="btn" value="提交">
</form>
<script>
    // 73so.com
    var btn=document.querySelector("#btn");
    btn.onclick=function(){
        var file = document.getElementById('btn_file').files[0];
        //定义可上传文件的类型
        var file_ypes =[".jpg",".png",".rar",".txt",".zip",".doc",".ppt",".xls",".pdf",".docx",".xlsx"]; 
        //获取文件的后缀名
        // file.name 为上传文件的名称
        var type = file.name.substring(file.name.indexOf(".")); 
        //判断上传的文件是否可上传
        if(file_ypes.indexOf(type) != -1){
            console.log('可以上传');
        }else{
            console.log('禁止上传');
        }
    }
</script>

js获取上传文件大小的方法

示例代码:

<!--表单数据-->
<form name="form1" id="form1">
    <input type="file" id="btn_file" name="file"></input>
    <input type="button" id="btn" value="提交">
</form>
<script>
    // 73so.com
    var btn=document.querySelector("#btn");
    btn.onclick=function(){
        var file = document.getElementById('btn_file').files[0];
        // 输出文件的大小,这里的大小是以字节为单的,需要我们自行转换为kb,或mb
        console.log(file.size);
        //判断文件是否过大
        // 下面判断文件是否超过 1m 大小 1M的大小划算为:1024 * 1024 = 1048576
        if(file.size > 1048576){
            alert('文件超过 1M 大小,不允许上传!');
            return false;
        }
    }
</script>
声明:无特别说明,转载请标明本文来源!
相关推荐