[JavaScript] 자바스크립트에서 텍스트 형식으로 파일 읽어오기

161_자바스크립트에서 텍스트 형식으로 파일 읽어오기

[적용]

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

---

[문법]

메소드	의미	반환
readAsText(파일)	텍스트로 읽어 오기	없음

---

[내용]

FileReader 객체를 사용해 input 요소로 선택한 파일 데이터에 접근할 수 있다.

FileReader 객체의 readAsText()를 사용해 파일을 텍스트 형식으로 읽을 수 있다.

비동기 형식이므로 addEventListener()를 사용해 읽기 작업 완료 이벤트인 load를 감시한다.

load 이벤트 완료 후 데이터에 FileReader 객체의 result 속성으로 접근할 수 있다.

 

HTML                                                                                                                                                              index.html

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

JavaScript                                                                                                                                                          main.js

const element = document.querySelector('#myFile');
const pEl = document.querySelector('.log');

// 파일 선택 기능
element.addEventListener('input', (event) => {
    const target = event.target;
    // 선택된 파일 참조
    const files = target.files;
    // 배열 타입이므로 0번째 파일 참조
    const file = files[0]
    
    // FileReader 인스턴스 생성
    const reader = new FileReader();
    // 읽기 작업 완료
    reader.addEventListener('load', () => {
        // 요소에 결과 출력
        pEl.textContent = reader.result;
    });
    // 텍스트 파일 형식으로 읽어오기
    reader.readAsText(file);
});

 

파일 선택 후 화면의 P 요소에 문자열을 표시한다.

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김