이미지 업로드

김형우·2021년 12월 13일
0

Javascript

목록 보기
2/8
<!DOCTYPE html>
<html lang="en">
<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>image.html</title>
    <link href="css/mystyle1.css" rel="stylesheet" />
</head>

<body>
    <div class="container">
        <h3>1. 이미지 첨부 기본</h3>
        <img src="imgs/defualt.png" id="img"
        style="width: 100px; height: 100px;" />

        <form action="" method="post" enctype="multipart/form-data" >
            <input type="file" id="file" />
            <input type="button" value="이미지업로드" />
        </form>

        <hr />
        <h3>2. 이미지 첨부 숨김</h3>
        <img src="imgs/defualt.png" id="img1"
            style="width: 100px; height: 100px; cursor: pointer;"/>
        <input type="file" id="file1" style="display: none;" />

        <hr />
        <h3>3. 이미지 n개 첨부</h3>
        <input type="file" id="file2" multiple /> <!-- multiple여러개 잡기 -->
        <div id="out2"></div>

    </div>

    <script>
        // -------------------3. 이미지 n개 첨부-----------------
        // selector 수행
        const file2 = document.getElementById("file2");
        const out2 = document.querySelector("#out2");

        // // 1
        file2.addEventListener('change', function(e){  // 리스너 안에 완료타이밍이 들어있어야한다!!!!
            // console.log(e);
            if(e.target.files) {
                // console.log(typeof e.target.files);
                // 초기화시점
                out2.innerHTML = "";
                for(let tmp of e.target.files){
                    // console.log(tmp);
                    const reader = new FileReader();               
                    reader.addEventListener('load', function(e1){
                        console.log(e1.target); 
                        out2.innerHTML += 
                            `<img src="${e1.target.result}" style="width:100px; height:100px;" />`;
                            // 변수라서 ``, ${} 사용
                            // 끝나는 타이밍
                    });
                    reader.readAsDataURL(tmp);
                }
            }
            
            // 46라인에 out2.innerHTML = ""; 부분이 중복되기떄문에 else 필요없음
            // else {
            //     out2.innerHTML = "";
            // }

        });
        
        // // 2
        // file2.addEventListener('change', (e) => {
        
        // });

        // // 3
        // file2.onchange = function(e){

        // };




        // -------------------2. 이미지 첨부 숨김-----------------
        // 위의 태그찾기 (selector 수행)
        const file1 = document.getElementById("file1");
        const img1 = document.querySelector("#img1");

        img1.addEventListener('click', function(){
            file1.click();
            
        });
        file1.addEventListener('change', function(e){                
                if(e.target.files[0]) {
                    console.log(e.target.files[0]);
                    const reader = new FileReader();               
                    reader.addEventListener('load', function(e1){
                        img1.src = e1.target.result;                
                    });
                    reader.readAsDataURL(e.target.files[0]);
                                        
                }
                else{
                    img1.src = 'imgs/defualt.png';
                }
            });
        
        // -------------------1. 이미지 첨부 기본-----------------

        // 위에 있는 태그중에서 id가 file인것 찾는 방법 2개
        const file = document.getElementById("file");
        const img = document.querySelector("#img");

        file.addEventListener('change', function(e){
            // console.log(e);
            console.log(e.target.files[0]);
            if (e.target.files[0]) {
                // 파일읽기 라이브러리(기본제공)
                const reader = new FileReader();
                // 파일을 읽음
                reader.readAsDataURL(e.target.files[0]);
                reader.addEventListener('load', function(e1){
                    console.log('파일읽기 완료시점');
                    console.log(e1);
                    img.src = e1.target.result;
                });
                // console.log('첨부한 상태');                
            }
            else{
                console.log('첨부하지 않은 상태');
                img.src = 'imgs/defualt.png';
            }
        });
                
    </script>
    
</body>
</html>
profile
The best

0개의 댓글