Blob：type 屬性

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

備註： 此功能可在 Web Worker 中使用。

Blob 介面的 type 唯讀屬性回傳檔案的 MIME 類型。

備註： 根據目前的實作，瀏覽器實際上不會讀取檔案的位元流來判斷其媒體類型，而是根據檔案的副檔名來推測。例如，將 PNG 圖片檔案重新命名為 .txt，會回傳「text/plain」而非「image/png」。此外，blob.type 通常僅對常見的檔案類型（如圖片、HTML 文件、音訊和視訊）可靠。不常見的副檔名會回傳空字串。用戶端的組態（例如 Windows 登錄檔）可能導致即使是常見類型也會回傳非預期的值。建議開發者不要僅依賴此屬性作為驗證的唯一依據。

值

包含檔案 MIME 類型的字串，若無法判斷類型則為空字串。

範例

此範例要求用戶選擇多個檔案，然後檢查每個檔案是否屬於指定的一組圖片檔案類型。

HTML

html
<input type="file" id="input" multiple />
<output id="output">選擇圖片檔案…</output>

JavaScript

js
// 我們的應用程式僅允許 GIF、PNG 和 JPEG 圖片
const allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];

const input = document.getElementById("input");
const output = document.getElementById("output");

input.addEventListener("change", (event) => {
  const files = event.target.files;

  if (files.length === 0) {
    output.innerText = "選擇圖片檔案…";
    return;
  }

  const allAllowed = Array.from(files).every((file) =>
    allowedFileTypes.includes(file.type),
  );
  output.innerText = allAllowed ? "所有檔案均符合！" : "請僅選擇圖片檔案。";
});

結果

規範

Specification
File API
# dfn-type

瀏覽器相容性

參見