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

如何在上傳前使用 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);
  });
});

客戶端MIME 類型檢查的好處

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

結論

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

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