[JS] input type="file" 파일 읽기

 

웹에서 파일을 입력 받으려면 HTML에서 input type="file"으로 받을 수 있다.

input 태그에 대해서는 다음 링크를 참조! (input type="file"의 HTML, CSS 링크) 

 

✱ JavaScript 코드

전체적으로 설명하자면,

1. 사용자가 input으로 파일을 선택하면 'change' 이벤트가 발생한다.

2. 파일이 선택되면 input의 'files' 속성에 'FileList' 형태의 유사배열객체가 저장된다.

3. 'FileReader' 객체는 파일을 읽을 수 있게 도와주는 객체다.

4. FileReader의 메서드 readAsText로 텍스트를 읽어올 수 있다.

5. 읽기 성공하면 'load'이벤트가 발생한다.

6. 읽어들인 파일의 내용은 FileReader 객체의 result 속성에 저장된다.

 

setEvent() {
   this.input.addEventListener('change', this.checkFile.bind(this));
}

input 요소에 change 이벤트 핸들러를 연결해준다. 파일 선택이 되면 checkFile 함수가 실행된다.

 

const currFiles = this.input.files;

input요소의 files 속성으로 선택한 파일들이 담긴 'FileList' 유사배열객체를 변수에 저장한다.

파일 한 개만 선택했을 때 FileList객체를 확인해보면 아래와 같다.

 

 

readFile(files) {
   const reader = new FileReader();
   reader.addEventListener('load', this.parser.bind(this, reader));
   reader.readAsText(files[0], 'utf-8');
}

FileReader의 readAsText로 파일의 텍스트를 읽을 수 있다. 먼저 reader 인스턴스를 생성하고, load 이벤트 핸들러를 등록한다. 파일을 성공적으로 읽어오면 load 이벤트가 발생하고 핸들러가 실행된다. 그리고 readAsText 메서드로 파일의 텍스트를 읽는다.

 

const dataArr = reader.result.split('\r\n');

읽어들인 파일의 내용은 FileReader 객체의 result 속성에 저장된다. result 속성 내의 데이터를 파싱해서 데이터를 사용하면 된다.  

 

참고로 개행마다 split하려고 '\r\n'으로 했는데 좋은 방법은 아닌 것 같다. 데이터를 만들 때 개행을 \r\n으로 한 경우에만 정상적으로 동작하기 때문에...개행마다 split하기 위해서는 다른 방법을 찾아봐야겠다.

 

 

 

---

참고📚

블로그 - 로컬 텍스트 파일 읽기(다중 파일 선택)