[책] 자바스크립트 코드 레시피 278 - 149일차

데이터 형식으로 파일 읽어 오기

• DataURL을 가져오고 싶을 때

구문

readAsDataURL(질문) DataURL = 읽어 오기

설명

FileReader 객체를 사용해서 input 요소로 선택한 파일 데이터에 접근할 수 있습니다. FileReader 객체의 readAsDataURL()를 사용해 파일을 DataURL 형식으로 읽을 수 있습니다. 비동기 형식이므로 addEventListener()를 사용해 읽기 작업 완료 이벤트인 load를 감시합니다. load 이벤트 완료 후 데이터에 FileReader 객체의 result 속성으로 접근할 수 있습니다.

실습

index.html

<input type="file" id="myFile" accept=".png, .jpg">
<p class="log">
  <img src="" alt="">
</p>

---

script.js

const element = document.querySelector('#myFile');
const imgEl = document.querySelector('.log img');
element.addEventListener('input', (event) => {
  const target = event.target;
  const files = target.files;
  const file = files[0];
  const reader = new FileReader();
  reader.addEventListener('load', () => {
    imgEl.src = reader.result;
  });
  reader.readAsDataURL(file);
});