js获取input上传文件的文件名和扩展名的方法

  • 2019 年 11 月 13 日
  • 笔记

使用 js 可以获取 input 上传文件的文件名和扩展名,这里我整理一下具体方法:

1. 使用原生JS获取:

CSS代码:给 div 一个内边距,按钮设置样式。

div{      padding: 5px;  }  #mybtn {      width: 100px;      height: 30px;      font-size: 18px;      background-color: #00a0e9;      border: none;      text-align: center;      color: #FFF;  }

HTML代码:写一个input file 按钮,一个 button 按钮用来触发一个事件,一个 div 容器用来放提示信息。

<div>      <input type="file" name="myfile" id="myfile" value=""/>  </div>  <div>      <button id="mybtn">点击</button>  </div>  <div id="div">  </div>

JS代码:点击 button 按钮时触发事件,如果未选择任何文件会返回 undefined ,如果已选择文件 则返回文件名和扩展名。

<script>      //获取一个上传文件的扩展名      var myfile = document.getElementById('myfile');      var mybtn = document.getElementById('mybtn');      var div = document.getElementById('div');      mybtn.onclick = function () {          //获取文件上传文件的文件名和扩展名          if (myfile.files[0] == undefined) {              alert('未上传任何文件!');          } else {              //获取上传文件的文件名              div.innerHTML= div.innerHTML+'<span style="color:#FF0000;">文件名:' + myfile.files[0].name + '</span><br>';              //获取上传文件的扩展名              var filevalue = myfile.value;              var index = filevalue.lastIndexOf('.');              div.innerHTML= div.innerHTML+'<span style="color:#FF0000;">扩展名:' + filevalue.substring(index) + '</span>';          }      }  </script>

测试效果如下图:

未上传任何文件:

已选择文件:

2. 使用 jQuery 获取:

CSS 和 HTML 部分代码没变,js 代码如下:我这次使用的是监听 input 的 change 事件,button 按钮可以删掉。

<script>      $(function () {          var file = "";          var fileName = "";          var fileExt = "";          $("#myfile").change(function () {              //获取文件的value值              file = $("#myfile").val()              //获取文件名+扩展名              fileName = file.split("\").pop();              //获取文件名              fileName = fileName.substring(0, fileName.lastIndexOf("."));              //获取文件的扩展名              fileExt = file.substr(file.lastIndexOf("."));              //清空DIV容器内容              $("#div").html("");              $("#div").append("<p style='color: red'>文件名:"+fileName+"</p>");              $("#div").append("<p style='color: red'>扩展名"+fileExt+"</p>");          })      });  </script>

效果如下图:

声明:本文由w3h5原创,转载请注明出处:《js获取input上传文件的文件名和扩展名的方法》 https://www.w3h5.com/post/89.html