JS获取文件后缀名|极客笔记

JS获取文件后缀名

在web开发中，经常会遇到需要获取文件的后缀名的情况。比如用户上传文件时，需要判断文件的类型是否符合要求；或者显示文件时，需要根据文件类型选择不同的图标等。本文将介绍如何使用JavaScript获取文件的后缀名。

获取文件名

在获取文件的后缀名之前，首先需要获取文件的完整名称。可以通过input标签的files属性来获取用户选择的文件，然后使用name属性来获取文件名。

// HTML
<input type="file" id="fileInput">

// JavaScript
const fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', function() {
  const file = fileInput.files[0];
  const fileName = file.name;
  console.log(fileName);
});

运行以上代码，选择任意文件后，控制台将输出该文件的名称。例如，选择名为example.pdf的文件，控制台将输出example.pdf。

获取文件后缀名

有了文件名后，就可以通过JavaScript获取文件的后缀名。文件后缀名通常是文件名中最后一个.后的字符串。可以使用split()方法将文件名按.分割成数组，然后取最后一个元素即可得到后缀名。

// HTML
<input type="file" id="fileInput">

// JavaScript
const fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', function() {
  const file = fileInput.files[0];
  const fileName = file.name;

  const fileExtension = fileName.split('.').pop();
  console.log(fileExtension);
});

运行以上代码，选择名为example.pdf的文件，控制台将输出pdf。