前端JS判断上传文件是否是图片

我们常用的文件上传类型呢一般就是图片，如何限制前端只能上传图片，有几种方法仅供参考。

1、用文件的类型来判断

// 获取文件输入框元素
const inputElement = document.getElementById("file-input");

// 监听文件选择事件
inputElement.addEventListener("change", (event) => {
  // 获取用户选择的文件
  const file = event.target.files[0];

  // 判断文件类型是否为图片
  if (file.type.startsWith("image/")) {
    console.log("用户选择了图片文件");
  } else {
    console.log("用户选择了非图片文件");
  }
});

2、用文件的后缀名来判断

// 获取文件输入框元素
const inputElement = document.getElementById("file-input");

// 监听文件选择事件
inputElement.addEventListener("change", (event) => {
  // 获取用户选择的文件
  const file = event.target.files[0];

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

  // 判断文件类型是否为图片
  if (fileExtension === "jpg" || fileExtension === "jpeg" || fileExtension === "png" || fileExtension === "gif") {
    console.log("用户选择了图片文件");
  } else {
    console.log("用户选择了非图片文件");
  }
});

3、通过文件编码来判断

// 获取文件输入框元素
const inputElement = document.getElementById("file-input");

// 监听文件选择事件
inputElement.addEventListener("change", (event) => {
  // 获取用户选择的文件
  const file = event.target.files[0];

  // 读取文件的前几个字节
  const reader = new FileReader();
  reader.onload = function(e) {
    const bytes = new Uint8Array(e.target.result);

    // 判断文件类型
    if (bytes[0] === 0xFF && bytes[1] === 0xD8 && bytes[2] === 0xFF) {
      console.log("用户选择了JPEG文件");
    } else if (bytes[0] === 0x89 && bytes[1] === 0x50 && bytes[2] === 0x4E && bytes[3] === 0x47) {
      console.log("用户选择了PNG文件");
    } else if (bytes[0] === 0x47 && bytes[1] === 0x49 && bytes[2] === 0x46 && bytes[3] === 0x38) {
      console.log("用户选择了GIF文件");
    } else {
      console.log("用户选择了未知类型的文件");
    }
  };
  reader.readAsArrayBuffer(file.slice(0, 4));
});