Blob.type

type は Blob オブジェクトのプロパティで、ファイルの MIME タイプを返します。

値

ファイルの MIME タイプを含む文字列、または型が特定できなかった場合は空文字列を指定します。

例

この例では、ユーザーにいくつかのファイルを選択してもらい、各ファイルが指定された画像ファイルタイプのセットのいずれかであるかどうかを確認します。

HTML

<input type="file" id="input" multiple />
<output id="output">画像ファイルを選択してください…</output>

JavaScript

// このアプリケーションは 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

ブラウザーの互換性

BCD tables only load in the browser

関連情報