Javascript) 서버와 통신 없이 file 타입의 input에 업로드한 이미지 파일 바로 화면에 보여주기 (input onchange event)

파일 타입의 input에 사용자가 파일을 넣고, 별도의 서버 통신 없이도 이 파일을 화면에 보여주는 방법이다. 

그냥 input에 value를 읽으면 fake path로 보여주기 때문에 file reader 객체를 통해서 읽어야 한다.

$("#file-input").on("change", (e) => {
        var file = e.target.files[0]
        var fr = new FileReader();
        fr.readAsDataURL(file)
        fr.onloadend = (e) => {
            $("#uploaded-file-img").append(`
                <div style="height: 600px; overflow-y: auto;">
                    <img width="100%;" src="${e.target.result}" alt="uploaded-sample" />
                </div>
            `)
        }
    })