JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScript Web APIのFile.typeプロパティとは？ファイルのMIMEタイプを取得する方法

JavaScriptのWeb APIに含まれるFile.typeプロパティは、対象となるファイルのメディアタイプ（MIMEタイプ）を示す文字列を返します。本記事では、File.typeプロパティの基本から実際の使い方まで、サンプルコードと実行結果をもとにわかりやすく解説します。

File.typeプロパティの基本

File.typeプロパティは、<input type="file">などでユーザーが選択したファイルの種類を「image/jpeg」「text/plain」「application/pdf」といった形式の文字列として取得できる、読み取り専用のプロパティです。

  • 戻り値： ファイルのMIMEタイプを表す文字列
  • ファイルタイプが判別できない場合や拡張子が認識されない場合は、空の文字列（""）が返されます
  • 返される値はOSやブラウザが保持するMIMEタイプの登録情報に依存するため、ファイル内容そのものの保証にはなりません。セキュリティが重要な場面では、サーバーサイドでの検証を組み合わせることをおすすめします

コード例

以下は、File Web APIのFile.typeプロパティを使用したサンプルコードです。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
    font-size: 18px;
    font-weight: 500;
    color: red;
}
</style>
</head>
<body>
<h1>JavaScript file.type property</h1>
<div class="result"></div>
<input type="file" class="fileInput" />
<h3>Upload a file using the above input type to get its file type</h3>
<script>
let resultEle = document.querySelector(".result");
document
.querySelector(".fileInput")
.addEventListener("change", (event) => {
    resultEle.innerHTML +=
    "File name = " + event.target.files[0].name + "<br>";
    resultEle.innerHTML += "File type = " + event.target.files[0].type;
});
</script>
</body>
</html>

このコードでは、ファイル入力欄でchangeイベントが発生するたびに、event.target.files[0]から選択されたファイル情報を取得し、name（ファイル名）とtype（MIMEタイプ）をresultクラスの要素内に表示しています。

実行結果

上記のコードをブラウザで実行すると、次のようにファイル選択用の入力欄が表示されます。

JavaScript Web APIのFile.typeプロパティとは？ファイルのMIMEタイプを取得する方法

続いて、「Choose file（ファイルを選択）」ボタンをクリックして任意のファイルを選択してみましょう。

JavaScript Web APIのFile.typeプロパティとは？ファイルのMIMEタイプを取得する方法

ファイルを選択すると、赤字で表示された領域にファイル名とファイルタイプ（MIMEタイプ）が出力されます。たとえば画像ファイルを選択すれば「image/jpeg」や「image/png」、PDFファイルなら「application/pdf」といった値が確認でき、File.typeプロパティの動作がひと目で理解できます。


  1. JavaScriptのsourceプロパティとは？正規表現パターンテキストを取得する方法を解説

    JavaScriptのsourceプロパティは、RegExp（正規表現）オブジェクトに設定されたパターン文字列そのものを返すプロパティです。g（グローバルマッチ）やi（大文字・小文字を区別しない）などのフラグは結果に含まれず、マッチング対象となる純粋な正規表現テキストのみを取得できます。 動的に正規表現を組み立てたい場合や、デバッグ時に実際に適用されているパターンを確認したい場合などに活用できる便利なプロパティです。 基本構文 const regex = /pattern/flags; console.log(regex.source); // パターン文字列のみが返される サンプルコード

  2. JavaScript Web APIのFile.nameプロパティとは？使い方とサンプルコードを解説

    JavaScriptのFile Web APIに含まれるFile.nameプロパティは、ファイルオブジェクトからファイル名のみを取得するためのプロパティです。このプロパティは、ファイルが保存されているフォルダのパス（ディレクトリ情報）を除いた、ファイル名だけを文字列として返します。 ユーザーが要素を使ってファイルを選択した際、そのファイル名を画面に表示したり、アップロード処理の前に入力チェックを行ったりする場面でよく利用されます。 主な特徴 読み取り専用：File.nameは変更できないため、取得のみ可能です。 パス情報は含まれない：セキュリティ上の理由から、ブラウザはローカルのフルパスを公