如何在上傳前使用 JavaScript 檢查檔案 MIME 類型？

在這個數(shù)位時代，上傳檔案已成為 Web 應(yīng)用程式的基本面向。驗證上傳檔案的 MIME 類型至關(guān)重要，以確保它們符合伺服器的期望並避免不必要的資源浪費。

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

準備工作

在開始討論技術(shù)細節(jié)之前，我們先建立基礎(chǔ)。檔案和 Blob API 對於 JavaScript 中的檔案操作是不可或缺的。幸運的是，這些 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 物件本身提供了一個 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 類型。

常見文件簽章

一旦辨識出 MIME 類型，我們就可以根據(jù)預先定義的標準接受或拒絕檔案上傳。

示範展示

為了說明所討論的概念，這裡有一個工作演示：

// 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. 減少伺服器負載:消除無效的不必要的伺服器請求
2. 增強的使用者體驗：防止因上傳不相容的檔案而導致令人沮喪的錯誤訊息和延遲。
3. 強大的檔案驗證：確保檔案遵循伺服器期望，最大限度地降低安全性和完整性

結(jié)論

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

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