[JavaScript] FileReader 객체

1. FileReader 객체란?

 

 FileReader 객체를 활용하면 파일을 읽고 서버로 업로드하는 등 다양한 파일 처리 작업을 수행할 수 있습니다.

• FileReader는 비동기적인 방식으로 파일을 읽기 때문에 파일이 크거나 읽는데 시간이 걸릴 수 있는 경우에도 웹 페이지의 응답성을 유지할 수 있습니다.
• <input> 태그를 이용하여 유저가 선택한 파일들의 결과로 반환된 FileList 객체에서 파일 객체를 얻을 수 있고, 드래그 앤 드롭으로 반환된 DataTransfer 객체에서도 파일 객체를 얻을 수 있습니다.

 

 

 

2. 속성

 

 FileReader 객체의 주요 속성은 다음과 같습니다.

 

1. result: 파일의 내용을 나타내는 데이터입니다. 파일을 읽은 후에는 해당 속성을 통해 파일 내용에 접근할 수 있습니다. 이 값은 읽기 작업이 완료된 후에 사용할 수 있습니다.

 

2. error: 파일 읽기 작업 중 발생한 오류에 대한 정보를 담고 있는 DOMError 객체입니다. 파일 읽기 작업이 성공적으로 완료되었다면 null로 설정됩니다. 그렇지 않은 경우에는 오류에 대한 정보를 제공합니다.

 

3. readyState: FileReader 객체의 상태를 나타내는 값입니다. 다음 세 가지 값 중 하나를 가질 수 있습니다.

• EMPTY (0): FileReader 객체가 아직 파일을 읽을 준비가 되지 않은 상태, 데이터가 로드되지 않음.
• LOADING (1): FileReader 객체가 파일을 읽는 중인 상태, 로딩 중.
• DONE (2): FileReader 객체가 파일 읽기 작업을 완료한 상태, 요청 완료.

 

 

 

3. 이벤트 핸들러

 

 FileReader 객체는 다양한 이벤트를 제공하여 파일 읽기 작업의 상태 변화 및 완료를 감지할 수 있습니다.

const reader = new FileReader();

reader.onload = function(e) {
    console.log(reader.result);
    console.log(e.target.result);    
}

 

1. onloadstart: 파일 읽기 작업이 시작될 때 호출됩니다. 이벤트 핸들러 내에서 초기화 작업이나 프로그레스 바 등의 표시를 설정할 수 있습니다.

 

2. onprogress: 파일 읽기 작업 중에 파일 데이터를 읽는 동안 호출됩니다. 이벤트 핸들러 내에서 읽은 데이터의 크기를 확인하거나 프로그레스 바 등에 업데이트를 표시할 수 있습니다.

3. onload: 파일 읽기 작업이 성공적으로 완료될 때 호출됩니다. 이벤트 핸들러 내에서 result 속성을 통해 파일의 내용에 접근하고 처리 작업을 수행할 수 있습니다.

 

4.onabort: 파일 읽기 작업이 중단될 때 호출됩니다. 주로 사용자가 작업을 취소한 경우에 호출될 수 있습니다.

 

5. onerror: 파일 읽기 작업 중 오류가 발생할 때 호출됩니다. 이벤트 핸들러 내에서 error 속성을 통해 발생한 오류에 대한 정보를 확인하고 처리할 수 있습니다.

 

6. onloadend: 파일 읽기 작업이 완료된 후 호출됩니다. (읽기의 성공이나 실패 여부는 상관없이 호출됩니다.) 이벤트 핸들러 내에서 정리 작업이나 후속 동작을 수행할 수 있습니다. 

 

※ 참고 : FileReader는 EventTarget 인터페이스를 상속받고 있습니다. 언급된 모든 이벤트들은 addEventListener 메서드를 사용하여 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 수 있습니다.

 

 

 

4. 메서드

 

 FileReader 객체는 파일을 읽을 수 있는 여러 메서드와 이벤트를 제공합니다.

const fileInput = document.getElementById("fileUpload");
const reader = new FileReader();

reader.readAsDataURL(fileInput.files[0]);

 

1. readAsText(file, [ encoding ]) : 파일을 텍스트 형식으로 읽습니다. file은 읽을 파일 객체이고, encoding은 선택적 매개변수로 파일의 텍스트 인코딩 방식을 지정합니다. 이 메서드를 사용하여 텍스트 파일의 내용을 읽을 수 있습니다. 예를 들어 텍스트 파일을 화면에 표시하거나 특정 문자열을 검색하는 등의 작업에 사용될 수 있습니다.

 

2. readAsDataURL(file): 파일을 데이터 URL 형식으로 읽습니다. file은 읽을 파일 객체입니다. 이 메서드를 사용하여 이미지 파일 등을 웹 페이지에 표시하거나, 파일을 미리 보기 하는 등의 작업에 사용될 수 있습니다.

 

3. readAsArrayBuffer(file): 파일을 바이너리 데이터로 읽습니다. file은 읽을 파일 객체입니다. 이 메서드를 사용하여 파일의 바이너리 데이터를 처리하거나, 데이터를 서버로 전송하기 위해 ArrayBuffer 객체로 변환하는 등의 작업에 사용될 수 있습니다.

 

4. readAsBinaryString(file): 파일을 바이너리 문자열로 읽습니다. file은 읽을 파일 객체입니다. 이 메서드는 현재 권장되지 않는 메서드로, 사용을 지양해야 합니다. 대신 readAsArrayBuffer()를 사용하는 것이 권장됩니다.

 

 

 

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