이미지 미리보기

Html, JS를 가지고

 

이미지 파일을 불러온 후, 미리보기를 구현하는 아주 간단한 방식을 소개해본다.

 

window객체에 내장되어있는 FileReader를 이용한 것이다.

 

먼저, input file에 onChange이벤트리스너를 붙여준다.

 

const oFReader = new FileReader();
oFReader.readAsDataURL(ev.target.files[0]);
oFReader.onload = ev => {
    document.querySelector('#uploadImage').src = ev.target.result;
};

위와 같은 코드로, 이미지 미리보기를 간단히 구현해볼 수 있다.

uploadImage는 해당 이미지 태그이다.

 

(예, <img id='uploadImage' alt='profile' />)

 

 

 

---

웹사이트 개발 / 홈페이지 제작 / android앱 개발 / ios 앱 개발 / server / client / aws / fullstack / buisness partner / 외주 / 용역

https://open.kakao.com/o/sNETgUJb

http://self-made.cloud