上传前如何在 JavaScript 中验证文件的 MIME 类型？-js教程-PHP中文网

上传前如何在 JavaScript 中验证文件的 MIME 类型？

Mary-Kate Olsen

发布： 2024-12-03 11:17:14

原创

576 人浏览过

How Can I Verify a File's MIME Type in JavaScript Before Uploading?

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

JavaScript 使您能够在上传前使用 FileReader 确定文件的 MIME 类型它到服务器。尽管服务器端检查是首选，但客户端检查仍然是一种选择。让我们探讨如何：

第 1 步：检索文件信息

从获取文件详细信息元素如下所示：

// Retrieve file information
var files = document.getElementById("your-files").files;

登录后复制

第 2 步：检查文件的 MIME 类型

快速方法：

使用用于提取 MIME 的 Blob类型：

console.log(files[i].type);  // Outputs "image/jpeg" or similar

登录后复制

正确的标头检查方法：

分析文件标头以查找特定于不同文件类型的“幻数”：

var blob = files[i];  // File object
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);
  }
  console.log(header);

  // Check the file signature against known types

};
fileReader.readAsArrayBuffer(blob);

登录后复制

真实 MIME 类型判断：

switch (header) {
    case "89504e47":
        type = "image/png";
        break;
    case "47494638":
        type = "image/gif";
        break;
    case "ffd8ffe0":
    case "ffd8ffe1":
    case "ffd8ffe2":
    case "ffd8ffe3":
    case "ffd8ffe8":
        type = "image/jpeg";
        break;
    default:
        type = "unknown";
        break;
}

登录后复制

通过这些方法，您可以在上传到服务器之前在客户端判断文件的MIME类型，减少不必要的服务器资源占用。

以上是上传前如何在 JavaScript 中验证文件的 MIME 类型？的详细内容。更多信息请关注PHP中文网其他相关文章！