File API

* FIle API란?

- File API는 사용자의 환겨에 저장된 파일의 속성이나 내용을 구할 수 있는 API를 말함.

- File API에서 취급할 수 있는 파일은 두 종류임.

1. <input type="file">로 선택한 파일

2. 드래그 앤 드롭한 파일

 

 

* File 오브젝트

- 파일을 조작하려면 파일을 나타내는 File 오브젝트를 사용해야 함.

- File 오브젝트를 구하는 방법은 타입에 따라 다름.

 

[<input type="file">의 경우]

 

- change 이벤트가 발생했을 때 input 요소의 file 속성에 선택한 파일의 목록이 배열로 저장됨.

 

e.onchange = function() {

var f = e.files[0];     // 첫 번째(0번) 파일의 File 오브젝트를 구하고 있음. ※ e는 input 요소의 오브젝트

}

 

[드래그 앤 드롭의 경우]

 

- drop 이벤트가 발생했을 때 이벤트 오브젝트의 dataTransfer 프로퍼티에 드롭한 파일의 목록이 배열로 저장됨.

 

t.ondrop = function(event) {

var f = event.dataTransfer.files[0];        // 첫 번째(0번) 파일의 File 오브젝트를 구하고 있음. ※ t는 드롭된 영역의 오브젝트

}

 

 

* 파일의 속성 구하기

- 파일 오브젝트의 아래 프로퍼티를 사용하여 파일의 정보를 구할 수 있음.

프로퍼티명	의미
name	파일명
size	파일 크기
type	MIME 타입(파일의 종류)

 

- 예를 들어, 파일명인 경우는 'f.name'이라고 씀.

 

* 텍스트 파일의 내용 구하기

- 텍스트 파일의 내용을 비동기로 구하려면 FileReader 오브젝트의 readAsText() 메서드를 사용해야 함.

- 파일 읽기가 완료되면 load 이벤트가 발생하므로, 해당 이벤트 핸들러 안에서 내용을 구함.

 

var r = new FileReader();            // FileReader 오브젝트 r을 생성함.

r.readAsText(f, "euc-kr");            // euc-kr 형식으로 된 텍스트 파일로 읽어 들임.

 

r.onload function() {

result.innerHTML = r.result;    // 파일의 읽기가 끝나면 FileReader 오브젝트의 result 프로퍼티에 일기 결과가 들어감.

}

 

※ result는 읽기 결과를 표시하기 위한 요소의 오브젝트

 

[문자 코드]

 

- 문자 코드를 생략한 경우는 아래와 같이 평가됨.

1) 파일 안에 MIME 타입의 기술이 있는 경우는 해당 문자 코드

예 : text/plain; charset=euc-kr

 

2) BOM(Byte Order Mark)이 있으면 해당 문자 코드

- BOM은 텍스트 파일에 포함된 문자 코드를 나타내는 데이터임.

 

3) MIME 타입도, BOM도 없으면 UTF-8

 

 

* 오류 처리

- 파일 읽기 중에 오류가 발생하면 load 이벤트 대신에 error 이벤트가 발생함.

- 오류는 몇 가지 종류로 나눌 수 있는데, 각 대응 방법의 예는 아래와 같음.

 

r.onerror = function(event) {    // 파일 읽기 중에 오류가 발생했을 때의 처리

switch(r.error.code) {    // 이렇게 오류 코드를 구할 수 있음.

case 1:

파일을 찾지 못했을 때의 처리

break;

case 2:

보안 오류가 발생했을 때의 처리

break;

case 3:

파일을 읽어 들이지 못할 때의 처리

break;

}

}

 

 

* 진행 경과 표시

- 파일의 크기가 커서 읽어 들이는 데 시간이 걸리는 경우, 진행 경과를 표시하고 싶을 때가 있음.

- 파일 읽기의 상태가 바뀌면 progress 이벤트가 발생하므로 그때 표시를 변경할 수 있음.

 

r.onprogress(event) {

prog.innerHTML = event.loaded + "바이트/" + event.total + "바이트";        // prog는 진행 경과를 표시하기 위한 요소의 오브젝트

}

 

- 이벤트 오브젝트의 진행 경과와 관련된 프로퍼티에는 아래와 같은 것들이 있음.

이름	의미
lengthComputable	전체 크기를 알고 있으면 true
loaded	읽기가 끝난 바이트 수
total	전체 바이트 수

 

[지원 상황]

 

	IE	Firefox	Opera	Safari	Chrome
File API	X	O	O	O	O

 

 

내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)