使用js正则表达式验证文件扩展名方法实例

使用 JavaScript 正则表达式验证文件扩展名是一个常见的前端开发需求，下面是一份完整的攻略，供参考。

什么是文件扩展名？

在计算机领域，文件扩展名是指在文件名的末尾添加的一个或多个字符，用于表示该文件的类型。例如，“.txt” 表示文本文件，“.png” 表示图像文件，“.html” 表示网页文件等等。

验证文件扩展名的方法

在 JavaScript 中，验证文件扩展名的方法通常是使用正则表达式来判断文件名中是否包含指定扩展名的字符串。下面是一个示例的 JavaScript 函数：

function validateFileExt(filename, exts) {
  var pattern = new RegExp('\.(' + exts.join('|') + ')$', 'i');
  return pattern.test(filename);
}

这个函数接收文件名和允许的扩展名列表（数组），并返回一个布尔值表示是否匹配。正则表达式的意思是“文件名以 .ext1、.ext2 ... 或 .extn 结尾”，其中 ext1 到 extn 是允许的扩展名。

例如，验证文件名 hello.txt 是否是一个文本文件，调用这个函数的方式如下：

var isValid = validateFileExt('hello.txt', ['txt']);
console.log(isValid);  // true

验证文件名 world.png 是否是一个图片文件，调用这个函数的方式如下：

var isValid = validateFileExt('world.png', ['jpg', 'png', 'gif']);
console.log(isValid);  // true

示例说明

• 示例一

假设需要验证上传的文件是否符合格式要求，只允许上传图片文件，这时候可以通过调用上面的 validateFileExt 函数来判断文件名是否符合要求。例如：

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

<script type="text/javascript">
  var fileInput = document.getElementById('fileInput');
  fileInput.addEventListener('change', function(e) {
    var filename = e.target.files[0].name;
    var isValid = validateFileExt(filename, ['jpg', 'png', 'gif']);
    if (!isValid) {
      alert('只允许上传图片文件！');
      e.target.value = '';  // 清空文件输入框
    }
  });
</script>

这段代码监听了文件输入框的 change 事件，在事件处理函数中获取文件名并调用 validateFileExt 函数来判断文件是否符合要求。如果文件扩展名不在允许的列表中，则弹出警告框并清空文件输入框。

• 示例二

另一个常见的需求是在线播放音视频，需要判断用户上传的文件是不是音视频文件。这时候可以通过调用 validateFileExt 函数来判断文件名是否符合要求。例如：

var filename = 'hello.mp4';
var isValid = validateFileExt(filename, ['mp4', 'flv', 'avi', 'wmv']);
if (!isValid) {
  alert('不支持的文件格式！');
} else {
  // 播放音视频
}

这段代码判断文件名是否是支持的音视频格式，如果不是则弹出警告框，否则继续播放音视频。