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

HTML DOM FileUpload の value プロパティ徹底解説！構文と実装サンプル

HTML DOM の input FileUpload の value プロパティは、ファイルアップロード用の入力ボタン（<input type="file">）が持つ value 属性の内容を返すプロパティです。ユーザーがファイルを選択した際に、そのファイルに関する値を JavaScript から取得したい場合に利用されます。

構文

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

object.value

サンプルコード

それでは、input FileUpload の value プロパティを使った具体的な実装例を見ていきましょう。ボタンをクリックすると、選択されたファイルアップロードボタンの value 値が画面に表示されるシンプルなデモです。

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM FileUpload value 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-value{
        font-weight:bold;
        font-size:1.4rem;
        color:#fff;
    }
</style>
</head>
<body>
<h1>FileUpload value Property Example</h1>
<p>Please Select a File!</p>
<input type="file">
<button onclick="getValue()" class="btn">Get File Upload Button Value</button>
<div class="show-value"></div>
<script>
    function getValue() {
        var chooseFileBtn= document.querySelector("input");
        document.querySelector(".show-value").innerHTML ="Value = " + chooseFileBtn.value;
    }
</script>
</body>
</html>

実行結果

上記のコードをブラウザで開くと、次のような画面が表示されます。

HTML DOM FileUpload の value プロパティ徹底解説！構文と実装サンプル

「Get File Upload Button Value」ボタンをクリックすると、JavaScript の getValue() 関数が呼び出され、ファイルアップロードボタンの value 属性の内容が画面下部に表示されます。

HTML DOM FileUpload の value プロパティ徹底解説！構文と実装サンプル

補足：セキュリティ上の注意点

セキュリティの観点から、最新のブラウザでは value プロパティによって返される値は「C:\fakepath\ファイル名」のようにダミーのパスとなり、ユーザーのローカル環境における実際のフルパスは取得できない仕様になっています。ファイル名のみを取得したい場合は、value を split() メソッドで分割して末尾の要素を取り出す方法が一般的です。

  1. HTML DOM入力検索値（value）プロパティの使い方を解説

    HTML DOMのInput Search（type=search）におけるvalueプロパティは、検索フィールドのvalue属性に関連付けられたプロパティです。このプロパティを利用することで、検索フィールドに入力されている値を取得したり、JavaScriptから任意の値を設定したりすることができます。また、検索フィールドのデフォルト値を指定する目的でも使われ、ユーザーがテキストを入力すると、その値はユーザーの入力内容に置き換わります。構文valueプロパティの基本的な構文は以下の通りです。値を設定する場合searchObject.value = text;「text」の部分には、検索フィール

  2. HTML DOMのInput Submit valueプロパティとは？構文と使い方を実例で解説

    HTML DOM の input submit value プロパティは、type=submit を持つ input 要素の value 属性に関連付けられたプロパティです。このプロパティを使うことで、送信ボタンの value 属性の値を取得したり、新しい値を設定したりすることができます。 送信ボタンの value プロパティを変更すると、ボタンに表示されるテキストも変化します。通常、送信ボタンにはデフォルトで「Submit（送信）」というテキストが表示されますが、value プロパティを利用すれば、これを任意の文字列に自由に変更できます。 構文 value プロパティを設定する場合の基本的な