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 |