如何在上傳檔案之前使用 JavaScript 檢查檔案的 MIME 類型？-js教程-PHP中文網

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

DDD

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

原創

666 人瀏覽過

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

登入後複製