正文

JavaScript判断文件后缀名的方法及案例详解

/0 浏览量
0703

在处理文件上传、文件路径解析等场景时，判断文件后缀名是一个常见的操作。JavaScript 提供了多种方法来判断文件的后缀名，以下是一些常见的方法及案例详解。

方法一：使用 filename.split('.') 分割字符串

这种方法的原理是将文件名分割成数组，然后获取数组的最后一个元素作为后缀名。

function getFileExtension(filename) {
  return filename.split('.').pop();
}

// 示例
console.log(getFileExtension('example.jpg')); // 输出: jpg
console.log(getFileExtension('example.tar.gz')); // 输出: gz

这种方法简单易用，但需要注意，如果文件名没有后缀，将返回空字符串。

方法二：使用正则表达式

正则表达式可以更精确地匹配文件后缀名，特别是当文件名包含多个点时。

function getFileExtension(filename) {
  const match = filename.match(/\.[^\/.\\]+$/);
  return match ? match[0] : '';
}

// 示例
console.log(getFileExtension('example.jpg')); // 输出: .jpg
console.log(getFileExtension('example.tar.gz')); // 输出: .gz

这种方法可以正确处理包含多个点的情况，但正则表达式可能会让代码的可读性降低。

方法三：使用 URL.createObjectURL() 方法

这个方法可以创建一个表示文件对象的URL。通过解析URL的最后一部分，可以获取文件后缀名。

function getFileExtension(filename) {
  const url = URL.createObjectURL(new File([filename], filename));
  return url.split('/').pop().split('?')[0];
}

// 示例
console.log(getFileExtension('example.jpg')); // 输出: example.jpg
console.log(getFileExtension('example.tar.gz')); // 输出: example.tar.gz

这种方法可以处理文件路径中的特殊字符，但需要处理URL编码和解码的问题。

方法四：使用 HTML5 的 FileReader API

FileReader API 可以读取文件内容，通过读取文件内容的第一部分来获取文件后缀名。

function getFileExtension(filename) {
  const reader = new FileReader();
  reader.onload = function(e) {
    const arr = new Uint8Array(e.target.result);
    const signature = arr.subarray(0, 4);
    const extension = '';
    switch (String.fromCharCode.apply(null, signature)) {
      case '\xff\xd8\xff':
        extension = 'jpg';
        break;
      case '\x89PNG\r\n\x1a\n':
        extension = 'png';
        break;
      // ... 其他文件格式
    }
    console.log(extension);
  };
  reader.readAsArrayBuffer(new File([filename], filename));
}

// 示例
getFileExtension('example.jpg'); // 输出: jpg

这种方法可以获取文件的MIME类型，从而判断文件格式，但需要处理各种文件格式的签名。

总结

以上四种方法各有优缺点，可以根据实际需求选择合适的方法。在实际应用中，建议结合文件上传、文件路径解析等场景，综合考虑方法的适用性。

-- 展开阅读全文 --