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

HTML DOM FileUploadのfilesプロパティとは？使い方をサンプルコードで解説

HTML DOMのFileUpload filesプロパティは、<input type="file">で作成されたファイルアップロードボタンを使ってユーザーが選択した、すべてのファイル情報を格納したFileListオブジェクトを返します。

このプロパティを利用することで、選択されたファイルの数や、各ファイルの名前・サイズ・種類などの詳細情報にJavaScriptからアクセスできるようになります。

構文

filesプロパティの基本的な構文は以下のとおりです。

object.files

戻り値としてFileListオブジェクトが返され、lengthプロパティで選択されたファイル数を取得したり、インデックスを指定して個々のFileオブジェクトにアクセスしたりできます。

サンプルコード

ここでは、複数ファイルを選択できるフォームを作成し、ボタンをクリックすると選択されたすべてのファイル名を画面に表示する例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
    body{
        text-align:center;
        background-color:#52B2CF;
        color:#fff;
    }
    .btn{
        background-color:coral;
        border:none;
        height:2rem;
        border-radius:50px;
        width:60%;
        margin:1rem auto;
        display:block;
        color:#fff;
        outline:none;
    }
    .show{
        font-size:1.2rem;
        color:#fff;
        font-weight:bold;
    }
</style>
</head>
<body>
<h1>DOM FileUpload files Property Example</h1>
<p>Select some files</p>
<input type="file" class="file-upload-btn" multiple>
<button onclick = "showFiles()" class = "btn">Click me to see all selected file</button>
<div class="show"></div>
<script>
    function showFiles() {
        var fileBtn = document.querySelector(".file-upload-btn");
        var showMsg = document.querySelector(".show");
        showMsg.innerHTML='';
        if(fileBtn.files.length === 0){
            showMsg.innerHTML = "Please select at least one file!!";
        } else {
            showMsg.innerHTML = "You selected these files:";
            for(let i=0;i<fileBtn.files.length;i++) {
                showMsg.innerHTML += '<p>' + fileBtn.files[i].name + '<p>';
            }
        }
    }
</script>
</body>
</html>

コードのポイント

  • multiple属性を付けることで、ユーザーは複数のファイルを同時に選択できます。
  • querySelector()でinput要素を取得し、.files.lengthで選択されたファイルの件数をチェックしています。
  • ファイルが1つも選択されていない場合は警告メッセージを表示し、選択されている場合はforループで各ファイルのnameプロパティを順番に出力します。

実行結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOM FileUploadのfilesプロパティとは？使い方をサンプルコードで解説

「Click me to see all selected file」ボタンをクリックすると、選択されたすべてのファイル名が一覧表示されます。

HTML DOM FileUploadのfilesプロパティとは？使い方をサンプルコードで解説

まとめ

FileUploadのfilesプロパティは、ファイル選択フォームの内容をJavaScriptで動的に処理する際に欠かせない機能です。選択ファイルのバリデーションや、アップロード前のプレビュー表示など、さまざまな場面で活用できます。主要なモダンブラウザ（Chrome、Firefox、Edge、Safariなど）すべてでサポートされているため、安心して利用できます。

  1. HTML DOMのInput FileUpload autofocusプロパティとは？使い方とサンプルコードを解説

    HTML DOMのInput FileUpload autofocusプロパティは、ページが最初に読み込まれた際に、ファイルアップロード用の入力欄（<input type=file>）へ自動的にフォーカスを当てるかどうかを設定・取得するためのプロパティです。 構文 autofocusプロパティの構文は以下のとおりです。 値を取得する場合（true / false を返す） inputFileUploadObject.autofocus 値を設定する場合 inputFileUploadObject.autofocus = booleanValue 設定できるブール値 booleanV

  2. HTML DOM Input FileUploadのacceptプロパティの使い方を解説

    HTML DOM の Input FileUpload accept プロパティは、ファイルアップロード（<input type=file>）要素の accept 属性の値を文字列として返します。このプロパティを利用することで、ユーザーがアップロードできるファイルの種類を取得したり、新しい値を動的に設定したりすることが可能です。 構文 構文は以下の通りです。 文字列値を取得する場合 inputFileUploadObject.accept accept 属性に新しい文字列値を設定する場合 inputFileUploadObject.accept = value サンプルコ