HTMLでファイル選択ボタンを設置する

こんばんは。きわさです。

今回はHTMLでファイル選択ボタンを設置する方法です。
押すとファイル選択画面が開くあれです。
3つ例を挙げてみます。

それぞれ見ていきます。

inputタグのtype=”file”をそのまま使用する

1つ目は一番シンプルです。

<input type="file" />

簡単ではありますが、これはブラウザ依存というか、ボタン名や見た目の変更ができないので、場合によっては不便ですね。

labelを使用する

2つ目はラベルを使用する方法です。

<label for="fileButton">
    ファイルを選択
    <input type="file" id="fileButton" style="display:none;" />
</label>

inputタグにidをつけ、自身はdisplay:noneで非表示にし、labelタグで囲みます。
labelタグのforではinputタグのidを指定することで、labelタグとinputタグを関連付けます。
このままではただの文字列ですが、cssなどで装飾可能です。

クリックイベントを使用する

最後に、参照ボタンのクリックイベントを使用する方法です。

<input type="file" id="fileButton2" style="display:none;" />
<input type="button" value="ファイルを選択" onclick="fileButtonClick();" />
<script>
    function fileButtonClick() {
        var f = document.getElementById("fileButton2");
        f.click();
        return;
    }
</script>

こちらも参照ボタンにidをつけ、非表示で用意しておきます。
別途inputタグをtype=”button”で作成し、このボタンのクリック処理で、参照ボタンのクリック処理を呼び出します。
こうすることで、他のボタンとレイアウトを揃えることができます。

選択したファイルを扱う方法は、下記記事に。
HTMLのファイル選択ボタンで選択したファイル情報を取得する