Javascript 이미지 업로드 미리보기

Javascript로 이미지 미리보기

 

1)  이미지 파일만 허용하는 html input

<input type="file" accept="image/*" id="test_input">

2) 원하는 곳에 이미지 보여주기

아래와 같이 이미지가 있는 곳 설정한 경

<img src="some url" id="test_img">

const file_input = document.querySelector("#test_input")
const image_files = file_input.files[0]
const test_img = document.querySelector("test_img")
test_img.src = URL.createObjectURL(image_files)