[Javascript] input=file 첨부한 이미지 섬네일 보기

옛날엔 뭐 톰캣 임시폴더 경로에서 파일 찾아서 가져오고 그랬던 것 같은데...

FileReader 사용하니까 되게 간단하네.

 

HTML

<div class="upload_box">
    <img id="id_img"/>
    <input id="id_input_file" name="input_file" type="file"/>
</div>

 

Javascript

document.getElementById("id_input_file").onchange = (inputEvent) => {
   let file = inputEvent.target.files[0]
   var reader = new FileReader()
   reader.onload = (readerEvent) => {
        doucment.getElementById("id_img").setAttribute("src", readerEvent.target.result)
   }
   reader.readAsDataURL(inputEvent.target.files[0])
}

 

---

https://blog.naver.com/PostView.naver?blogId=wellbeinglife_&logNo=222784243746&categoryNo=0&parentCategoryNo=0&viewDate=&currentPage=1&postListTopCurrentPage=1&from=postView 

[JavaScript] / 이미지 썸네일 기능