画像のアップロードプレビュー

1674 ワード

<html>
    
    <head>
        <script type="text/javascript">
            function preview() {
                var x = document.getElementById("myfile");
                d1.style.display = "block";
                d2.style.display = "block";
                var img1 = document.getElementById('img1');
                var img2 = document.getElementById('img2');
                img1.setAttribute('src', x.value);
                img2.setAttribute('src', x.value);
                img1.setAttribute('width', 120);
                img1.setAttribute('height', 90);
                img2.setAttribute('width', 300);
                img2.setAttribute('height', 225);

            }
        </script>
    </head>
    
    <body>
        <form method="post" action="#">
            <input type="file" name="myfile" id="myfile" onchange="preview()" />
        </form>
        <div id="d1" style="display:none;">
            <h4>120*90</h4>
            <img src="" id="img1" />
        </div>
        <div id="d2" style="display:none;">
            <h4>300*225</h4>
            <img src="" id="img2" />
        </div>
    </body>

</html>