[JavaScript] 자바스크립트로 첨부 텍스트 파일 읽기

HTML에서 <input type="file">로 파일 첨부가 가능하다. 그렇다면 첨부한 파일을 웹상에서 읽어오려면 어떻게 해야할까?  

 

먼저 <input type="file">에 대한 MDN 문서를 살펴보면 이렇게 나와있다. 

요소의 HTMLInputElement.files 속성은 선택한 파일(File) 목록을 FileList 객체로 반환합니다. FileList는 배열처럼 행동하므로, length 속성을 사용해 현재 선택한 파일의 수를 알 수 있습니다.

즉, FileList 객체를 제어해 첨부 파일에 접근할 수 있다. 

Filelist는 배열로 되어있으며, 요소명.files[번호] 의 형식으로 각각의 파일을 선택할 수 있다. 첨부 파일이 하나인 경우 요소명.files[0] 으로 가져오고, 여러개인 경우 사용하려는 파일의 번호를 선택해주면 되겠다. 

 

 

이제 파일을 선택하는 방법은 알았다. 그러면 내용은 어떻게 읽어오면 될까? 

바로 FIleReader 객체를 사용하면 된다. 해당 객체에 대한 설명을 보자. 

FileReader 객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는 File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해줍니다.

이 객체를 이용해 파일의 내용을 읽고 저장할 수 있다고 나와있다.

 

FileReader를 좀 더 살펴보면 이런 내용을 찾을 수 있다. 

*생성자
FileReader(): 새로 생성된 FileReader를 반환합니다.

*속성
FileReader.result: 파일의 컨텐츠입니다. 이 속성은 읽기 작업이 완료되고 읽기 작업의 초기화에 사용한 방식으로 결정된 데이터의 포맷이 정해진 후에 유효합니다.

*이벤트 핸들러
FileReader.onload: load 이벤트의 핸들러. 이 이벤트는 읽기 동작이 성공적으로 완료 되었을 때마다 발생합니다.

*메서드
FileReader.readAsText(): 지정된 Blob의 내용 읽기를 시작하고 완료되면 result 속성에 파일 내용이 텍스트 문자열로 포함됩니다.

파일의 컨텐츠는 result 속성에 들어있다.  

즉 생성자를 통해 새 FileReader를 만들어준 후, FileReader.readAsText()메서드를 실행해 FileReader.onload 이벤트가 발생하면 FileReader.result에서 파일의 내용을 가져오면 되겠다. 

 

 

다음은 텍스트 파일을 첨부하면 콘솔에 내용을 출력하는 코드이다. 

//<input type="file" accept=".txt" id="fileInput">
const fileInput = document.querySelector("#fileInput");
fileInput.addEventListener("change", loadFile);

function loadTextFile(){
	//새 FileReader 생성
    const file = new FileReader();
    
    //첨부한 파일 컨텐츠를 읽기
    file.readAsText(this.files[0]);
    
    //읽기가 완료되면 파일 내용을 콘솔에 출력 
    file.onload = () => {
        const textFile = file.result;
        console.log(textFile);
    }   
}

코드로 구현하면 이렇게 된다. 

---

참고 자료

JavaScript에서 텍스트 파일 읽기: https://www.delftstack.com/ko/howto/javascript/read-text-file-in-javascript/

<input type="file">: https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input/file

FileList: https://developer.mozilla.org/ko/docs/Web/API/FileList

FileReader: https://developer.mozilla.org/ko/docs/Web/API/FileReader