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

HTML DOM FileUploadのnameプロパティとは？取得・変更方法をわかりやすく解説

HTML DOMのFileUpload nameプロパティは、HTMLのファイルアップロード入力（<input type="file">）におけるname属性の値を取得および変更するために使用されるプロパティです。フォーム送信時にデータを識別するための名前をJavaScriptから動的に操作したい場合に役立ちます。

構文

基本となる構文は以下のとおりです。

1. name属性の値を取得する場合

object.name

2. name属性の値を設定する場合

object.name = "text"

サンプルコード

それでは、FileUploadのnameプロパティを使用した具体的な例を見てみましょう。以下の例では、ボタンをクリックすると、ファイル選択 input のname属性の値が「My_Name」から「My_New_Name」に変更され、変更前後の値が画面に表示されます。

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM name Property</title>
<style>
    body{
        background-color:#397367;
        color:#fff;
        padding:20px;
    }
    .btn{
        display:block;
        background-color:#22223B;
        color:#fff;
        border:none;
        padding:0.5rem;
        border-radius:50px;
        width:80%;
        margin:10px;
    }
    .show-name{
        font-weight:bold;
        font-size:1.4rem;
        color:#fff;
    }
</style>
</head>
<body>
<h1>FileUpload name Property Example</h1>
<input type="file" name="My_Name">
<button onclick="setName()" class="btn">Click to change Name attribute value of
choose file input</button>
<div class="show-name"></div>
<script>
    function setName() {
        var chooseFileBtn= document.querySelector("input");
        document.querySelector(".show-name").innerHTML ="Previous Name = " + chooseFileBtn.name + "";
        chooseFileBtn.name = "My_New_Name";
        document.querySelector(".show-name").innerHTML +="New Name = " + chooseFileBtn.name + "";
    }
</script>
</body>
</html>

実行結果

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

HTML DOM FileUploadのnameプロパティとは？取得・変更方法をわかりやすく解説

ブラウザの開発者ツールで「要素の検証（Inspect Element）」を確認すると、初期状態ではname属性に「My_Name」が設定されていることがわかります。

HTML DOM FileUploadのnameプロパティとは？取得・変更方法をわかりやすく解説

続いて、青色のボタンをクリックしてみましょう。クリックすると、ファイルアップロード入力のname属性の値が変更されます。

HTML DOM FileUploadのnameプロパティとは？取得・変更方法をわかりやすく解説

もう一度「要素の検証」を確認すると、name属性が新しい値「My_New_Name」に書き換わっていることが確認できます。

HTML DOM FileUploadのnameプロパティとは？取得・変更方法をわかりやすく解説

まとめ

このように、FileUploadのnameプロパティを使えば、JavaScriptから簡単にname属性の参照と更新が行えます。フォームの動的な制御や、条件に応じて送信データの名前を切り替えたい場合などに活用できる便利なプロパティなので、ぜひ覚えておきましょう。

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

    HTML DOMのInput Search nameプロパティは、検索フィールド（<input type=search>）のname属性を設定または取得するために使用されるプロパティです。name属性は、フォームデータがサーバーへ送信された後に、そのデータを識別する役割を果たします。また、JavaScriptからもname属性を利用してフォーム要素を参照し、後から動的に操作することが可能です。 nameプロパティでできること nameプロパティを活用することで、次のようなことが実現できます。 フォーム送信時に、サーバー側でどの入力欄のデータかを識別できる JavaScriptから

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

    HTML DOM の Input Submit name プロパティは、送信ボタン（submit ボタン）の name 属性を設定または取得するために使用されます。name 属性は、フォームデータがサーバーへ送信された後に、そのデータを識別するための重要な役割を果たします。構文（Syntax）name プロパティを設定する場合の構文は以下のとおりです。submitObject.name = nameここで指定する name は、送信ボタンに付ける名前です。既存の name 属性値を取得したい場合は、submitObject.name をそのまま参照することで現在の値を文字列として返します。サン