如何在上傳前使用 JavaScript 檢查文件 MIME 類型？

在這個(gè)數(shù)字時(shí)代，上傳文件已成為 Web 應(yīng)用程序的基本方面。驗(yàn)證上傳文件的 MIME 類型至關(guān)重要，以確保它們符合服務(wù)器的期望并避免不必要的資源浪費(fèi)。

盡管最初持懷疑態(tài)度，JavaScript 使我們能夠輕松地在客戶端檢查文件 MIME 類型。本文將深入探討操作方法，并配有實(shí)際演示和廣泛使用的文件簽名的綜合列表。

準(zhǔn)備工作

在開始討論技術(shù)細(xì)節(jié)之前，我們首先建立基礎(chǔ)。文件和 Blob API 對于 JavaScript 中的文件操作是不可或缺的。幸運(yùn)的是，這些 API 得到了主流瀏覽器的廣泛支持。

第 1 步：提取文件信息

要檢索有關(guān)所選文件的信息，我們可以利用輸入元素：

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 對象本身提供了一個(gè) 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 與已知的文件簽名進(jìn)行匹配，以確定 MIME 類型。

常見文件簽名

一旦識別出 MIME 類型，我們就可以根據(jù)預(yù)定義的標(biāo)準(zhǔn)接受或拒絕文件上傳。

演示展示

為了說明所討論的概念，這里有一個(gè)工作演示：

// 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);
  });
});

客戶端 MIME 類型檢查的好處

1. 減少服務(wù)器負(fù)載: 消除無效的不必要的服務(wù)器請求
2. 增強(qiáng)的用戶體驗(yàn)：防止因上傳不兼容的文件而導(dǎo)致令人沮喪的錯(cuò)誤消息和延遲。
3. 強(qiáng)大的文件驗(yàn)證：確保文件遵循服務(wù)器期望，最大限度地降低安全性和完整性

結(jié)論

JavaScript 提供了一種在客戶端檢查文件 MIME 類型的有效方法，補(bǔ)充了服務(wù)器端驗(yàn)證。通過利用 File 和 Blob API，開發(fā)人員可以有效地確定文件的 MIME 類型，從而增強(qiáng) Web 應(yīng)用程序的安全性、效率和用戶體驗(yàn)。

以上是如何在上傳文件之前使用 JavaScript 檢查文件的 MIME 類型？的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！