imagepreview.html

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

<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>
</head>

<body>
    <!-- 이미지 파일만 선택할 수 있는 file 객체-->
    <input type="file" id="imginput" accept="image/*" />
    <!--  <input type="file" accept=".png,.jpg,.jpge,.gif" /> -->
    <!-- 이미지 미리보기 영역 -->
    <img id="display" width="250" height="250" />

    <script>
        // 필요한 DOM 객체 찾아오기
        let imginput = document.getElementById("imginput");
        let display = document.getElementById("display");

        // imginput의 선택이 변경되면 
        imginput.addEventListener("change", (e) => {
            // 선택한 파일의 내용을 읽기
            let reader = new FileReader();
            // 파일이 선택되었는지 확인
            // javascript는 0이 아닌 숫자나
            // null이나 undefined가 아니면 true로 간주- truthy
            if(!(imginput.files &&imginput.files[0])){
                alert("선택된 파일이 없음");
                display.src=null;
                return;
            }
            reader.readAsDataURL(imginput.files[0]);
            // 파일의 내용을 전부 읽으면
            reader.addEventListener("load", () => {
                // 읽은 내용을 이미지의 소스로 사용
                display.src = reader.result;
            })
        });
    </script>
</body>

</html>