[JavaScript]파일 입출력 - FileReader 객체

FileReader란?

FileReader는 type이 file인 input 태그 또는 API 요청과 같은 인터페이스를 통해 File 또는 Blob 객체를 편리하게 처리할 수 있는 방법을 제공하는 객체입니다.

 

abort, load, error와 같은 이벤트에서 발생한 프로세스를 처리하는데 주로 사용되며, File 또는 Blob 객체를 읽어서 result 속성에 저장합니다. JavaScript 개발자는 result 속성을 통해 데이터를 접근할 수 있습니다.

 

이번 포스팅은 FileReader 객체에 대해 소개하며, 예제는 이전 포스팅을 참고해주세요.

 

목차

1. 비동기로 동작하는 FileReader
2. FileReader 사용 방법
3. 언제 File 또는 Blob를 읽어야 하는지
4. FileReader 객체의 주요 속성

---

비동기로 동작하는 FileReader

JavaScript에서 setTimeout() 함수, AJAX 요청(API 요청)처럼 잠재적으로 시간이 소모되는 작업은 HTML 페이지 렌더링에 영향을 줄 수 있으므로 동기가 아닌 비동기로 동작합니다. 비동기로 동작하면 HTML 페이지 렌더링 차단을 피하므로 HTML 페이지 렌더링에 영향을 주지 않습니다.

 

FileReader도 비동기로 동작합니다.

 

만약 type이 file인 input 태그에서 대용량 파일을 선택하고 파일 정보를 result 속성에 저장하는 과정이 동기식으로 동작한다면, 파일 정보를 result 속성에 저장할 때까지 HTML 렌더링에 영향을 줄 수 있습니다. 그렇기 때문에 FileReader는 비동기 방식으로 작동합니다.

반응형

---

FileReader 사용 방법

new 연산자를 사용하여 FileReader 객체를 생성합니다.

var fr = new FileReader();

 

FileReader 객체 생성 후 FileReader의 아래 네 가지 함수 중 하나를 호출하여 File 또는 Blob를 읽어서 result 속성에 저장합니다. 네 가지 함수의 인수는 File 또는 Blob 객체입니다.

• readAsText(): 파일 객체의 내용을 텍스트로 읽습니다. 파일의 내용은 result 속성에는 문자열 값으로 들어갑니다.
• readAsDataURL(): 파일 객체를 읽은 후 데이터 URL 표현으로 변환합니다.
• readAsArrayBuffer(): 파일 객체의 내용을 배열 버퍼로 읽습니다.
• readAsBinaryString(): 파일 객체의 내용일 비트 문자열로 읽습니다. 

 

위에서 소개한 네 개의 함수는 다음과 같이 사용할 수 있습니다.

var fr = new FileReader();

// 텍스트로 읽음
fr.readAsText(File 또는 Blob);

// 데이터를 URL 표현으로 변환
fr.readAsDataURL(File 또는 Blob);

// 배열 버퍼로 읽음
fr.readAsArrayBuffer(File 또는 Blob);

// 비트 문자열로 읽음
fr.readAsBinaryString(File 또는 Blob);

---

언제 File 또는 Blob를 읽어야 하는지

위에서 FileReader 객체에서 File 또는 Blob 객체를 읽을 수 있는 네 가지 함수를 소개하였습니다. 위 함수를 사용하기 전에 File 또는 Blob 객체를 읽은 결과를 처리하기 위한 과정도 고려해야 합니다.

 

주로 load, abort, error, progress 이벤트에서 FileReader 객체를 사용하여 결과를 확인하거나 처리할 수 있습니다.

• load: 파일 읽기 작업이 완료되면 작동합니다.
• error: 에러로 인해 파일을 읽을 수 없을 때 동작합니다.
• abort: abort() 함수를 호출하여 파일 읽기 작업이 취소될 때 동작합니다.
• progress: 파일을 읽는 동안 일정한 간격으로 동작합니다.

---

FileReader 객체의 주요 속성

FileReader 객체는 여러 가지 속성이 있지만, 가장 핵심적인 속성은 세 가지입니다.

• result: 파일 읽은 결과를 가지고 있거나 null 값을 가집니다.
• error: 읽기 작업에서 발생한 오류를 설명하는 Error 객체를 가지거나 null 값을 가집니다.
• readyState: 객체의 상태를 숫자로 관리합니다. 0은 비어있음(Empty)으로 FileReader 객체에서 읽기 작업이 수행되지 않았음을 의미합니다. 1은 로딩 중(Loading)으로 파일을 읽는 중을 의미합니다. 2는 파일 읽기 작업이 완료(Done)되었음을 의미합니다.