如何在上传文件之前使用 JavaScript 检查文件的 MIME 类型？-js教程-PHP中文网

如何在上传文件之前使用 JavaScript 检查文件的 MIME 类型？

DDD

发布： 2024-12-12 17:01:13

原创

677 人浏览过

How can I check a file's MIME type using JavaScript before uploading it?

如何在上传前使用 JavaScript 检查文件 MIME 类型？

在这个数字时代，上传文件已成为 Web 应用程序的基本方面。验证上传文件的 MIME 类型至关重要，以确保它们符合服务器的期望并避免不必要的资源浪费。

尽管最初持怀疑态度，JavaScript 使我们能够轻松地在客户端检查文件 MIME 类型。本文将深入探讨操作方法，并配有实际演示和广泛使用的文件签名的综合列表。

准备工作

在开始讨论技术细节之前，我们首先建立基础。文件和 Blob API 对于 JavaScript 中的文件操作是不可或缺的。幸运的是，这些 API 得到了主流浏览器的广泛支持。

第 1 步：提取文件信息

要检索有关所选文件的信息，我们可以利用输入元素：

var input = document.getElementById("file-input");

input.addEventListener("change", function(e) {
  var files = e.target.files;
  
  // Iterate through the files
  for (var i = 0; i < files.length; i++) {
    console.log("Filename: " + files[i].name);
    console.log("Type: " + files[i].type);
    console.log("Size: " + files[i].size + " bytes");
  }
});

登录后复制

步骤 2：确定 MIME 类型

有两种方法可以确定 MIME type:

快速方法: JavaScript Blob 对象本身提供了一个 MIME 类型属性：

var blob = files[i]; // File from Step 1
console.log(blob.type);

登录后复制

Header检查方法：为了更可靠的方法，我们可以检查文件header:

var blob = files[i]; // File from Step 1
var fileReader = new FileReader();

fileReader.onloadend = function(e) {
  var header = "";
  
  // Extract the first four bytes of the file
  var arr = (new Uint8Array(e.target.result)).subarray(0, 4);
  for (var i = 0; i < arr.length; i++) {
    header += arr[i].toString(16);
  }
  
  console.log(header);
};

fileReader.readAsArrayBuffer(blob);

登录后复制

接下来，我们需要将获取到的 header 与已知的文件签名进行匹配，以确定 MIME 类型。

常见文件签名

File Type	Signature (hexadecimal)
PNG	89504e47
GIF	47494638
JPEG	ffd8ffe0, ffd8ffe1, ffd8ffe2

一旦识别出 MIME 类型，我们就可以根据预定义的标准接受或拒绝文件上传。

演示展示

为了说明所讨论的概念，这里有一个工作演示：

// Get file header
function getFileHeader(blob, callback) {
  var fileReader = new FileReader();
  fileReader.onloadend = function(e) {
    var arr = (new Uint8Array(e.target.result)).subarray(0, 4);
    var header = "";
    for (var i = 0; i < arr.length; i++) {
      header += arr[i].toString(16);
    }
    callback(header);
  };
  fileReader.readAsArrayBuffer(blob);
}

// Determine MIME type
function getMimeType(header) {
  switch (header) {
    case "89504e47":
      return "image/png";
    case "47494638":
      return "image/gif";
    case "ffd8ffe0":
    case "ffd8ffe1":
    case "ffd8ffe2":
      return "image/jpeg";
    default:
      return "unknown";
  }
}

// Handle file selection
document.getElementById("file-input").addEventListener("change", function(e) {
  var file = e.target.files[0];
  getFileHeader(file, function(header) {
    var mimeType = getMimeType(header);
    console.log("File: " + file.name);
    console.log("MIME Type: " + mimeType);
  });
});

登录后复制