js获取上传文件类型以及大小的方法

yund56 2025-07-23 21:41 3 浏览

前端web上传文件时，需要在上传之前判断一下文件的类型以及文件的大小，HTML为前端的标记语言是无法做到这一点，只能使用javascript 动态脚本代码来实现。

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

示例代码：

<!--表单数据-->
<form name="form1" id="form1">
<input type="file" id="btn_file" name="file"></input>
<input type="button" id="btn" value="提交">
</form>
<script>
  var btn=document.querySelector("#btn");
  btn.onclick=function(){
        var file = document.getElementById('btn_file').files[0];
        // 打印文件的大小，文件大小的单位为字节（B）
        console.log(file.size);
        //判断文件是否过大
        // 下面判断文件是否超过 1m 大小 1M的大小划算为：1024 * 1024 = 1048576
        if(file.size > 1048576){
              alert('文件超过 1M 大小，不允许上传！');
              return false;
        }
  }
</script>

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

示例代码：

<!--表单数据-->
<form name="form1" id="form1">
<input type="file" id="btn_file" name="file"></input>
<input type="button" id="btn" value="提交">
</form>
<script>
    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"];
          //获取文件的后缀名
          var type = file.name.substring(file.name.indexOf("."));
          //判断上传的文件是否可上传
          if(file_ypes.indexOf(type) != -1){
          			console.log('可以上传');
          }else{
          			console.log('禁止上传');
          }
    }
</script>

js动画效果代码

上一篇：应该学会的20个JavaScript代码写法
下一篇：前端性能拉胯?这 8 个 JavaScript 技巧让你的代码飞起来!

js获取上传文件类型以及大小的方法

相关推荐

django留言板_留言板html好看的模板

一次分享给你29个PHP基础常用类助力你快速提升

你还在手动筛选吗?filter函数才是多条件筛选的yyds!

一篇文章轻松掌握VLookup、XLookup与Filter函数

初学ThinkPHP(一):用TP6+LayUI实现数据表格

新函数FILTER函数_filter函数的作用

软件工程培训，选择线上还是线下呢?

连南举办2024年软件正版化工作联席会议暨正版软件培训班

Excel筛选也智能?一个FILTER函数就搞定!

营商在上海_营商上海数字科技有限公司