노마더코더 크롬 앱 만들기 : 이미지 업로드 추가

이미지 업로드 기능 추가

html

<section id=images-up>
        <div>
            <h1> Upload a File</h1>
            </div>
            <div id="canv"></div>
            <div>
            <input type="file" multiple="false" accept="image/*" onchange=upload(event) id = "img">
        </div>
    </section>

JS

function upload(event){
    const reader = new FileReader(); //파일 읽는 메소드 불러오고

    reader.onload = function(event) { 
        const img = document.createElement("img"); // 이미지 요소 생성
        img.setAttribute("src", event.target.result); // 이미지 주소 결과를 src에 출력

        document.querySelector("#canv").appendChild(img); // 
    }
    reader.readAsDataURL(event.target.files[0]);
  }

참고 : https://codepen.io/shubhamc_007/pen/zNJWPM