2023年03月09日更新

HTMLとJavaScriptで動的にファイル入力欄を作ってみよう

どうも、クラゲジュニアです。

今回は、HTML上のファイル入力欄を動的に作成するためのプログラムを示します。

プログラム

今回のプログラムはこちらです。

ボタンを押すと動的にinputタグと各inputタグに対する挙動を定義します。それぞれのinputタグの挙動はid="picture-img"のimgタグに対して入力された画像を設定します。

プログラムの流れはコメントを参照してください。

<!DOCTYPE html>
<html lang="jp">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>動的にフォームを作ってみよう</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css">
</head>

<body>

    <div>
        <button type="button" onclick="handleFile()">設定</button>
    </div>
    <div id="many-form">
    </div>
    <div>
        <img id="picture-img" height="400">
    </div>

    <script src="https://code.jquery.com/jquery-3.6.3.min.js"
        integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
    <script type="text/javascript">

        async function handleFile() {
            // note: いくつのフォームを作成するか?
            num = 3;

            // note: ここで初期化を実施しないと、クリックのたびにフォームが増え続けてしまう。
            let manyForm = document.getElementById("many-form");
            manyForm.innerHTML = "";

            // note: フォームの実体を作成する。
            for (let i = 0; i < num; i++) {
                $('<p>入力フォーム' + (i + 1) + '</p>').appendTo('#many-form');
                $('<div>画像選択: <input type="file" id="picture_input_' + i + '" accept=".png,.jpg,.jpeg"/></div>').appendTo('#many-form');
            }

            // note: 作成したフォームに対して動きを設定する。
            for (let i = 0; i < num; i++) {
                $('#many-form').on('change', '#picture_input_' + i, (event) => {
                    const fileList = event.target.files;
                    const file = fileList[0];
                    const reader = new FileReader();

                    reader.onload = (eventLoad) => {
                        console.log(eventLoad);
                        document.getElementById("picture-img").src
                             = eventLoad.target.result;
                    };
                    reader.readAsDataURL(file);
                })
            }
        }
    </script>
</body>

</html>

動かしてみた結果はこちらです。動的に作成したフォームが機能していることが確認できます。

以上です。