2. FILEAPI
INTERFACE
File
Reader
File
Blob
FileList 편집자 초안이 작성되었고 최신 버전은 2013년 9월 12일에 작성
파일의 정보나 내용을 가져올 수 있고 이를 서버로 전송할 수 있다.
이 API를 이용하면 자바스크립트에서 로컬 파일에 액세스 가능하고
되었으며 표준화 제정 단계는 Working Draft다.
File API는 파일 개체를 표현하기 위한 API이다. 2006년도에
3. File
Writer
File
System
File API는 로컬 파일에 액세스만 가능한 API다. 따라서 파일을 생성하거나
쓰고싶다면 File Writer API의 사양을, 디렉터리를 생성하거나 삭제하는 등
파일 시스템 작업을 하고 싶다면 File System API의 사양을 살펴
봐야한다
하지만 아쉽게도 File API는 대부분의 브라우저에서 지원하지만
File Writer와 File System은 대부분 지원하지 않는다
5. BLOB
INTERFACE
Properties
Method
size : long
Blob 객체에 포함된 데이터의 용량
바이트로 표시되며 읽기 전용이다.
type : DOMString
Blob객체에 포함된 데이터의 MIME 타입을 ASCII 인코딩 한
문자열. 모두 소문자다. MIME 종류를 알 수없는 경우는 비어있다.
slice(Start : long, end : long, contentType : DOMString)
=> Blob
지정한 범위 만큼의 바이트를 가진 새로운 Blob 개체를 반환
한다.
close(void)
=> void
영구적으로 Blob 객체를 다시 사용할 수 없는 상태로 만든다.
Blob은 Binary large object의
약자로 이진 데이터(이미지와
음성 그리고 기타 멀티미디어
파일 등)를 만들거나 객체로
조작 하기 위해 사용하는 형식
으로 보통 커다란 파일을 의미
한다.
6. BLOB
INTERFACE
Properties
Method
size : long
Blob 객체에 포함된 데이터의 용량
바이트로 표시되며 읽기 전용이다.
type : DOMString
Blob 객체에 포함된 데이터의 용량
바이트로 표시되며 읽기 전용이다.
slice(Start : long, end : long, contentType : DOMString)
=> Blob
지정한 범위 만큼의 바이트를 가진 새로운 Blob 개체를 반환
한다.
close(void)
=> void
영구적으로 Blob 객체를 다시 사용할 수 없는 상태로 만든다.
Blob은 Binary large object의
약자로 이진 데이터(이미지와
음성 그리고 기타 멀티미디어
파일 등)를 만들거나 객체로
조작 하기 위해 사용하는 형식
으로 보통 커다란 파일을 의미
한다.
Example
var aFileParts = ['<a id="a"><b id="b">hey!</b></a>’],
oMyBlob = new Blob(aFileParts, {type : 'text/html'});
7. FILE
INTERFACE
File는 Blob를 상속받아 몇 가지
프로퍼티를 추가한 객체다.
Chain
Properties
lastModifiedDate : Date
파일을 마지막으로 수정한 날짜를 나타낸다.
name : string
파일의 이름을 나타낸다.
8. Properties
Method
length : number
File 객체의 갯수를 읽기 전용 값으로 나타낸다.
Item(index : long)
=> File?
index에 해당하는 File 객체를 반환한다. 존재하지 않으면
null을 반환한다.
Input 태그로 접근할 수 있는 files
프로퍼티는 FileList Interface로
구현되어 있으며 이는 1개의
프로퍼티와 1개의 메소드로 이루어져
있다.
FILELIST
INTERFACE
9. Properties
Method
length : number
File 객체의 갯수를 읽기 전용 값으로 나타낸다.
Item(index : long)
=> File?
index에 해당하는 File 객체를 반환한다. 존재하지 않으면
null을 반환한다.
Input 태그로 접근할 수 있는 files
프로퍼티는 FileList Interface로
구현되어 있으며 이는 1개의
프로퍼티와 1개의 메소드로 이루어져
있다.
FILELIST
INTERFACEExample
<input type="file">
<script>
var inputFile = document.getElementsByTagName('input')[0],
file = inputFile.item(0); // 없다면 null
var inputFile = document.getElementsByTagName('input')[0],
file = inputFile[0]; // 없다면 undefined
</script>
10. Properties
Error
FILE
INTERFACE
READER
File 객체나 Blob 객체의 내용을 읽기
위한 속성을 정의하고 있다. 제공
하는 API는 비동기다.
error : DOMError?
파일 읽기 실패 시 발생한 오류의 타입을 나타낸다.
readyState : short
파일 읽기 처리 상태를 나타낸다.
result : (DOMString|Arraybuffer)?
읽기 결과가 저장된다. 파일 읽기 동작이 완료되면 이 속성을
사용할 수 있다.
error.NOT_FOUND_ERR : 1
파일을 찾을 수 없음
error.SECURITY_ERR : 2
보안 에러
error.ABORT_ERR : 3
파일 읽기 중지(abort 사용 등)
error.NOT_READABLE_ERR : 4
파일 읽기 권한 없음
error.ENCODING_ERR : 5
DataURL의 크기 제한 초과
State
FileReader.EMPTY : 0
파일 읽기 전
FileReader.LOADING : 1
파일 읽기 중
FileReader.DONE : 2
파일 읽기 완료
11. Method
FILE
INTERFACE
READER
File 객체나 Blob 객체의 내용을 읽기
위한 속성을 정의하고 있다. 제공
하는 API는 비동기다.
readAsArrayBuffer(blob : Blob)
=> void
ArrayBuffer 형식으로 파일을 읽는다.
readAsText(blob : Blob [, encoding])
=> void
텍스트 형식으로 파일을 읽는다.
readAsDataURL(blob Blob)
=> void
DataURL 형식으로 파일을 읽는다.
abort(void)
=> void
파일 읽기를 중지한다.
Event
onloadstart
onprogress
onload
onerror
onabort
onloadend
읽기를 시작할 때 발생하는 이벤트
읽는 중 정기적으로 발생하는 이벤트
읽기에 성공했을 때 발생하는 이벤트
읽기에 실패했을 때 발생하는 이벤트
읽기를 중지했을 대 발생하는 이벤트
읽기가 완료됐을 때 발생하는 이벤트
(성공/실패 여부와 상관없이 발생)
12. Method
FILE
INTERFACE
READER
File 객체나 Blob 객체의 내용을 읽기
위한 속성을 정의하고 있다. 제공
하는 API는 비동기다.
readAsArrayBuffer(blob : Blob)
=> void
ArrayBuffer 형식으로 파일을 읽는다.
readAsText(blob : Blob [, encoding]
=> void
텍스트 형식으로 파일을 읽는다.
readAsDataURL(blob Blob)
=> void
DataURL 형식으로 파일을 읽는다.
abort(void)
=> void
파일 읽기를 중지한다.
Error
onloadstart
onprogress
onload
onerror
onabort
onloadend
읽기를 시작할 때 발생하는 이벤트
읽는 중 정기적으로 발생하는 이벤트
읽기에 성공했을 때 발생하는 이벤트
읽기에 실패했을 때 발생하는 이벤트
읽기를 중지했을 대 발생하는 이벤트
읽기가 완료됐을 때 발생하는 이벤트
(성공/실패 여부와 상관없이 발생)
Example
var input = document.getElementById(‘file’),
file = input.files.item(0),
reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(event){
console.log(reader.result); //data:image/npm;base64,iVBORw0...
};
13. Method
FILE
INTERFACE
READER
FileReader는 비동기적으로 File을
읽지만 FileReaderSync는 동기적으로
읽는다. 비동기적인 방법은 이벤트
핸들러를 사용해야하지만 동기적인
방법은 그럴 필요가 없으므로 구현이
단순해진다. FileReaderSync는
WebWorkers 환경에서만 사용할 수
있다.
readAsArrayBuffer(blob : Blob)
=> void
ArrayBuffer 형식으로 파일을 읽는다.
readAsText(blob : Blob [, encoding]
=> void
텍스트 형식으로 파일을 읽는다.
readAsDataURL(blob Blob)
=> void
DataURL 형식으로 파일을 읽는다.
SYNC
14. Method
FILE
INTERFACE
READER
FileReader는 비동기적으로 File을
읽지만 FileReaderSync는 동기적으로
읽는다. 비동기적인 방법은 이벤트
핸들러를 사용해야하지만 동기적인
방법은 그럴 필요가 없으므로 구현이
단순해진다. FileReaderSync는
WebWorkers 환경에서만 사용할 수
있다.
readAsArrayBuffer(blob : Blob)
=> void
ArrayBuffer 형식으로 파일을 읽는다.
readAsText(blob : Blob [, encoding]
=> void
텍스트 형식으로 파일을 읽는다.
readAsDataURL(blob Blob)
=> void
DataURL 형식으로 파일을 읽는다.
SYNC
Example
// worker.js
self.addEventListener('message', function(e){
var files = e.data,
buffers = [];
[].forEach.call(files, function(file){
var reader = new FileReaderSync(),
buffer = reader.readAsArrayBuffer(file);
buffers.push(buffer);
});
postMessage(buffers);
}, false);
15. Method
FILE
INTERFACE
READER
FileReader는 비동기적으로 File을
읽지만 FileReaderSync는 동기적으로
읽는다. 비동기적인 방법은 이벤트
핸들러를 사용해야하지만 동기적인
방법은 그럴 필요가 없으므로 구현이
단순해진다. FileReaderSync는
WebWorkers 환경에서만 사용할 수
있다.
readAsArrayBuffer(blob : Blob)
=> void
ArrayBuffer 형식으로 파일을 읽는다.
readAsText(blob : Blob [, encoding]
=> void
텍스트 형식으로 파일을 읽는다.
readAsDataURL(blob Blob)
=> void
DataURL 형식으로 파일을 읽는다.
SYNC
Example
// app.js
var worker = new Worker('worker.js');
worker.onmessage = function(e){
// e.data should be an array of ArrayBuffers.
};
worker.onerror = function(e){
// e.lineno
// e.filename
// e.message
};
