JavaScript 检测文件的类型的方法

JavaScript 检测文件类型的方法可以通过文件类型的扩展名或者文件的 MIME 类型来进行判断。下面是一些具体的步骤和示例说明。

通过文件类型的扩展名进行判断

JavaScript 可以通过 String 对象的 endsWith() 方法或者正则表达式匹配文件名的后缀来进行文件类型的判断。

使用 String.endsWith() 方法

endsWith() 方法可以检查一个字符串是否以指定的后缀字符串结尾。可以通过以下代码来判断文件类型。

let fileName = "example.jpg";
if (fileName.endsWith(".jpg")) {
  console.log("这是 JPG 图像文件");
} else if (fileName.endsWith(".png")) {
  console.log("这是 PNG 图像文件");
} else {
  console.log("未知文件类型");
}

使用正则表达式匹配文件类型

使用正则表达式也可以实现文件类型的判断。可以通过以下代码来判断文件类型。

let fileName = "example.jpg";
if (/\.(jpg|jpeg|png)$/i.test(fileName)) {
  console.log("这是图像文件");
} else if (/\.(mp4|avi|wmv)$/i.test(fileName)) {
  console.log("这是视频文件");
} else {
  console.log("未知文件类型");
}

通过文件 MIME 类型进行判断

MIME 类型是一种标准化的文件类型的描述方法。可以通过获取文件的 MIME 类型来判断文件类型。

使用 FileReader 对象获取文件 MIME 类型

使用 FileReader 对象的 readAsDataURL() 方法可以读取文件并返回一个 data: URL 字符串，该字符串包含了文件的基本信息，其中也包括 MIME 类型。

以下是一个通过 FileReader 对象获取文件 MIME 类型的示例。

let file = document.getElementById("fileInput").files[0];
let reader = new FileReader();
reader.addEventListener("loadend", function() {
  let dataUrl = reader.result;
  let mimeType = dataUrl.split(",")[0].match(/:(.*?);/)[1];
  if (mimeType === "image/png") {
    console.log("这是 PNG 图像文件");
  } else if (mimeType === "image/jpg" || mimeType === "image/jpeg") {
    console.log("这是 JPG 图像文件");
  } else {
    console.log("未知文件类型");
  }
});
reader.readAsDataURL(file);

使用 XMLHttpRequest 对象获取文件 MIME 类型

XMLHttpRequest 对象也可以获取文件的 MIME 类型。可以通过以下代码示例来实现。

let xhr = new XMLHttpRequest();
xhr.open("HEAD", "example.jpg", true);
xhr.onreadystatechange = function() {
  if (this.readyState === this.DONE) {
    let mimeType = xhr.getResponseHeader("Content-Type");
    if (mimeType === "image/png") {
      console.log("这是 PNG 图像文件");
    } else if (mimeType === "image/jpg" || mimeType === "image/jpeg") {
      console.log("这是 JPG 图像文件");
    } else {
      console.log("未知文件类型");
    }
  }
};
xhr.send(null);

以上就是 JavaScript 检测文件类型的方法的完整攻略，其中包括了通过文件扩展名以及文件 MIME 类型两种方法来判断文件类型。