JavaScript 시리즈☕

사진 미리보기 사이트 만들기 (HTML,JS 사용)

@ENFJ 2022. 11. 20. 20:41

결과

 

사진 선택 전

사진 선택 후

 

코드 (파일명: test.html)

<html>
<head>
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#imgInp").on('change', function(){
                readURL(this);
            });
        });

        function readURL(input) {
            if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                    $('#blah').attr('src', e.target.result);
                }

              reader.readAsDataURL(input.files[0]);
            }
        }


    </script>
</head>
<body>
    <form id="form1" runat="server">
        <input type='file' id="imgInp" />
        <img id="blah" src="#" alt="your image" />
    </form>
</body>
</html>