[JavaScript] 업로드 이미지 미리보기 구현 (단일/다중)

1. 단일 이미지 미리보기

input 태그에 type = file

function imageChange(event){

        let img = document.createElement("img");

        const reader = new FileReader();

        reader.onload = function(event){

            img.setAttribute("src", event.target.result);

        }

        reader.readAsDataURL(event.target.files[0]);  

        document.querySelector("#imageContainer").appendChild(img);

}

 

2. 다중 이미지 미리보기

input 태그에 type = file , multiple 속성 추가

function imageChange(event){
    let i = event.target.files.length-1;

    for(let image of event.target.files){

        let img = document.createElement("img");

        const reader = new FileReader();

        reader.onload = function(event){

            img.setAttribute("src", event.target.result);

        }

        reader.readAsDataURL(event.target.files[i--]);  

        document.querySelector("#imageContainer").appendChild(img);

    }

}