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

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

JavaScriptのFile Web APIに含まれるFile.nameプロパティは、ファイルオブジェクトからファイル名のみを取得するためのプロパティです。このプロパティは、ファイルが保存されているフォルダのパス（ディレクトリ情報）を除いた、ファイル名だけを文字列として返します。

ユーザーが要素を使ってファイルを選択した際、そのファイル名を画面に表示したり、アップロード処理の前に入力チェックを行ったりする場面でよく利用されます。

主な特徴

  • 読み取り専用：File.nameは変更できないため、取得のみ可能です。
  • パス情報は含まれない：セキュリティ上の理由から、ブラウザはローカルのフルパスを公開せず、ファイル名のみを返します。
  • 拡張子も含まれる：返される値には拡張子（例：「sample.jpg」）がそのまま含まれます。

サンプルコード

以下は、File Web APIのFile.nameプロパティを使った実装例です。ファイル選択用のinput要素からファイルを読み込み、選択されたファイル名を表示します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript file.name プロパティ</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.name プロパティ</h1>
<div class="result"></div>
<input type="file" class="fileInput" />
<h3>上記の入力欄でファイルを選択すると、そのファイル名が表示されます</h3>
<script>
    let resultEle = document.querySelector(".result");
    document
    .querySelector(".fileInput")
    .addEventListener("change", (event) => {
        resultEle.innerHTML += "ファイル名 = " + event.target.files[0].name;
    });
</script>
</body>
</html>

実行結果

ブラウザでページを開くと、「ファイルを選択」ボタンと案内テキストが表示されます。

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

「ファイルを選択」ボタンをクリックし、任意のファイルを選択すると、以下のように選択したファイル名が赤字で表示されます。

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

コードのポイント

  1. changeイベントの監視：input要素に対してaddEventListener()でchangeイベントを登録し、ファイルが選択されたタイミングを検知します。
  2. files[0].nameでファイル名を取得：event.target.filesは選択されたFileオブジェクトの配列（FileList）であり、files[0].nameで先頭のファイル名を参照できます。
  3. 複数ファイル対応：input要素にmultiple属性を追加すれば、複数のファイル名をループ処理で順番に取得することも可能です。

このように、File.nameプロパティを使えば、ユーザーが選択したファイルの名前を簡単に取得でき、ファイルアップロード機能やプレビュー表示など、さまざまなUI実装に活用できます。

  1. JavaScriptで配列内オブジェクトのプロパティ名を置き換える方法

    JavaScriptでオブジェクト配列のプロパティ名を置き換える方法 JavaScriptでは、map()メソッドを活用することで、配列に含まれる各オブジェクトのプロパティ名を別の名前に簡単に置き換えることができます。map()は元の配列を変更せずに新しい配列を生成するため、安全かつ効率的なデータ変換処理に適しています。 以下は、オブジェクト配列のプロパティ名 name を fullName に置き換えるサンプルコードです。 サンプルコード <!DOCTYPE html> <html lang="en"> <head> <meta

  2. JavaScriptにおけるES6のプロパティ省略記法（ショートハンド）の使い方

    ES6（ECMAScript 2015）では、オブジェクトのキー名と、その値として代入したい変数名が同じである場合、値の指定を省略し、キー名だけを記述するだけで済む「プロパティ省略記法（Property Shorthand）」が使えます。この記法により、コードがより簡潔で読みやすくなります。以下に、JavaScriptでのプロパティ省略記法の実装例を示します。 コード例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <