上傳前如何在 JavaScript 中驗證文件的 MIME 類型？-js教程-PHP中文網

上傳前如何在 JavaScript 中驗證文件的 MIME 類型？

Mary-Kate Olsen

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

原創

579 人瀏覽過

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中文網其他相關文章！