js获取判断上传文件后缀名的示例代码

当需要上传文件时，有时我们需要判断文件的后缀名是否符合规范，例如只支持上传jpg、png、gif等图片格式。这时我们可以通过 JavaScript 来获取并判断上传文件的后缀名是否符合要求。下面是获取判断上传文件后缀名的示例代码的完整攻略：

1. 获取上传的文件信息

在 HTML 中，我们需要使用 <input> 标签的 type 属性为 “file” 来创建文件上传字段。在 JavaScript 中，我们需要获取该字段，并监听其 onchange 事件等待用户选择文件后自动触发获取上传文件信息的函数，如下所示：

<input type="file" id="upload-file" onchange="getFile()">

function getFile() {
  const fileInput = document.getElementById('upload-file');
  const file = fileInput.files[0];
}

2. 获取上传文件的后缀名

获取上传文件的后缀名可以从文件对象的 name 属性中进行截取，截取后缀名时需要使用 JavaScript 提供的 String 对象的 slice() 方法或者 split() 方法。示例如下：

// 使用 slice() 方法获取后缀名
const fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1);

// 使用 split() 方法获取后缀名
const fileExtension2 = file.name.split('.').pop();

3. 判断上传文件的后缀名是否符合规范

对于符合要求的文件后缀名，我们可以直接进行后续操作；对于不符合要求的文件后缀名，我们应该提示用户重新选择正确格式的文件。示例如下：

if (fileExtension === 'jpg' || fileExtension === 'png' || fileExtension === 'gif') {
  // 处理符合要求的文件
} else {
  // 提示用户选择正确格式的文件
  alert('请选择 jpg、png 或 gif 格式的文件');
}

示例说明

示例 1：判断上传文件是否为图片格式

假设我们的网站只允许上传图片格式的文件，我们可以设置只接受 jpg、png 或 gif 格式的图片文件。在用户上传文件后，我们可以对文件的后缀名进行判断，根据不同的后缀名类型进行处理。代码示例如下：

<input type="file" id="upload-img" onchange="getImgFile()">

<script>
function getImgFile() {
  const fileInput = document.getElementById('upload-img');
  const file = fileInput.files[0];

  // 获取文件后缀名
  const fileExtension = file.name.split('.').pop();

  // 判断文件是否为 jpg、png 或 gif 格式
  if (fileExtension === 'jpg' || fileExtension === 'png' || fileExtension === 'gif') {
    // 处理图片文件
    console.log('这是一张图片');
  } else {
    // 提示用户选择正确的文件格式
    alert('请选择 jpg、png 或 gif 格式的文件');
  }
}
</script>

示例 2：限制上传文件大小

假设我们需要限制用户上传文件大小，我们可以在获取文件信息后，使用文件对象的 size 属性来获取文件大小，然后与预先设置好的文件大小进行比较。如果上传文件大小超出限制，则提示用户重新选择符合规定的文件，代码示例如下：

<input type="file" id="upload-file" onchange="checkFileSize()">

<script>
function checkFileSize() {
  const fileInput = document.getElementById('upload-file');
  const file = fileInput.files[0];

  // 获取文件大小
  const fileSize = file.size;

  // 设置最大文件大小限制为 1MB
  const maxSize = 1024 * 1024;

  // 判断文件大小是否超出限制
  if (fileSize > maxSize) {
    alert('请选择小于 1MB 的文件');
    fileInput.value = ''; // 清空文件上传字段的 value 属性
  }
}
</script>