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

텍스트 형식으로 파일 읽어 오기

• 유저가 선택한 파일을 텍스트 형식으로 읽어 오고 싶을 때

구문

readAsText(파일) 텍스트로 읽어 오기

설명

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

실습

index.html

<input type="file" id="myFile" accept=".txt">
<p class="log"></p>

---

script.js

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