1. File 객체 및 File API ☞ MDN File (Web API) 참조
ㅇ (개요)
- File API는, 웹 개발자에게 클라이언트 컴퓨터의 파일에 안전하게 접근할 수 있는 기능을 제공
- 이를 통해, 로컬 파일과의 상호작용이 용이해지며, 파일의 읽기 및 쓰기 기능이 가능해짐
ㅇ (특징)
- Blob 객체 상속 : File 객체는 Blob 객체를 상속받을 수 있음
ㅇ (File 객체 생성 방법) : 로컬 파일로부터 File 객체를 불러들이는 방법 둘(2)
- input 요소로부터 불러들임
. multiple 속성(선택) : 다수 파일 선택 가능
. accept 속성(선택) : 파일 유형에 대한 MIME 타입 지정 가능
. input 요소에 의해 선택된 파일의 File 객체는, files 프로퍼티에 저장됨
- Drag and Drop API로부터 불러들임
. 사용자가 파일을 드래그하여 특정 영역에 놓으면, 해당 파일을 File 객체로 접근 가능
ㅇ (File 객체 사용 방법)
- 폼의 파일 입력 필드(input 요소)를 기반
. File 객체는, 주로 HTML 폼의 파일 입력 필드(input 요소)를 통해 생성됨
. HTML5에서는 파일 입력 요소에 파일 컬렉션을 추가하여,
. 사용자가 선택한 파일의 정보를 직접 액세스할 수 있음
- 파일 컬렉션
. 파일 입력 필드에서 1개 이상의 파일을 선택하면,
. 선택된 파일 각각에 대한 File 객체의 시퀀스가 포함된 files 프로퍼티가 생성됨
- files 프로퍼티 (읽기 전용 속성)
. name: 선택한 로컬 파일의 이름
. size: 파일의 크기 (바이트 단위)
. type: 파일의 MIME 유형 (문자열)
. lastModifiedDate: 파일의 마지막 수정 시간 (문자열)
2. FileReader 객체
ㅇ (개요)
- FileReader 객체는, Blob 객체가 참조하는 파일 또는 기타 데이터 유형의 내용을,
비동기적으로 읽어들이는 기능을 제공
- 이를 통해 파일의 내용을 다양한 형식으로 읽을 수 있습니다
ㅇ (주요 메소드)
- readAsText(blob[, encoding])
. 파일의 내용을 텍스트 형식으로 읽음
. 인코딩을 지정 가능 (기본값 : UTF-8)
- readAsArrayBuffer(blob)
. 파일의 내용을 ArrayBuffer 형식으로 읽음
. 주로, 바이너리 데이터 작업에 사용
- readAsDataURL(blob)
. 파일의 내용을 데이터 URL 형식으로 읽음
. 이미지 파일을 표시할 때 유용
- readAsBinaryString(blob) (현재, deprecated : 사용 중지 상태)
. 파일의 내용을 바이너리 문자열 형식으로 읽음
ㅇ [참고사항]
- 이벤트 처리
. FileReader 객체는 파일 읽기가 완료되면 load 이벤트를 발생시킴
. 이 이벤트를 통해 파일의 내용을 읽은 후 후속 작업을 수행 가능
- 오류 처리
. 파일 읽기 중 오류 발생시, 이를 처리하기 위해 error 이벤트를 활용 가능