[Vanilla JS] input에서 선택한 이미지 미리보기

이에 대한 건 클론 트위터에서 썼던 코드인데 당시에 강의에서 봤던 걸 그대로 따라 썼던 터라 조금 더 잘 이해하기 위해 다시 한 번 정리한다. 클론 트위터에서는 리액트로 구현을 했지만, 이번에는 mdn 문서를 찾아보며 바닐라 자바스크립트로 구현해본다.

 

 

 

일단은 index.html에 input을 마크업해준다.

<input type="file" accept="image/*" onchange="previewFile(event)" />

input에서 type을 file로 지정하고 accept로 모든 이미지를 선택할 수 있게 정한다. 그리고 자바스크립트에서 쓸 함수를 input에 넣어준다. input 속성으로 onchange를 쓸 수 있다는 걸 처음으로 알았던 오늘... 리액트에서 onChange가 있지만, 이 이벤트가 addEventListener('change', callback function)에서 왔을 거라 생각했던 터라 mdn 문서에서 이걸 발견하고 어라?! 싶었다. (input 속성으로 onclick, onsubmit이 다 있다. HTML을 더 열심히 공부해야겠다 -!)

 

 

 

const previewFile = function (event) {
  const previewImg = document.createElement('img');
  const selectedFile = event.target.files[0];
  const reader = new FileReader();
  reader.readAsDataURL(selectedFile);
  reader.onloadend = event => {
    previewImg.src = event.target.result;
  };
  document
    .querySelector('input[type=file]')
    .insertAdjacentElement('afterend', previewImg);
};

input에 이미 함수를 적어줬기 때문에 이미지 파일을 선택하면 event가 발생하는데 이 발생한 이벤트 타켓의 파일을 변수에 'selectedFile'에 할당한다. 그리고 'FileReader()'라는 API를 이용해서 이미지의 경로를 얻는데 사용한다. 이 경로를 얻기까지 시간이 걸리기 때문에 'load'가 'end' 되는 event를 받아서 이 결과 값을 img의 src와 동일하게 할당한다. 그리고 'insertAdjacentElement'를 이용해서 input 바로 밑에 img를 넣어주면 맨 위의 사진처럼 선택한 이미지를 볼 수 있다. 

 

이미지가 너무 커서 CSS 작업을 해줘야하는데, 이를 함수 안에서 직접 하려고 하면 에러가 뜨는데 왜 그럴까... 의문.