Download - 명세부터 깨우치는 FILEAPI
![Page 1: 명세부터 깨우치는 FILEAPI](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864d54d8b42a0f2a8b4606/html5/thumbnails/1.jpg)
background : http://goo.gl/J1GgP1
명세부터 깨우치는
FILEAPI
![Page 2: 명세부터 깨우치는 FILEAPI](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864d54d8b42a0f2a8b4606/html5/thumbnails/2.jpg)
FILEAPI INTERFACE
File Reader
File
Blob
FileList 편집자 초안이 작성되었고 최신 버전은 2013년 9월 12일에 작성
파일의 정보나 내용을 가져올 수 있고 이를 서버로 전송할 수 있다. 이 API를 이용하면 자바스크립트에서 로컬 파일에 액세스 가능하고
되었으며 표준화 제정 단계는 Working Draft다.
File API는 파일 개체를 표현하기 위한 API이다. 2006년도에
![Page 3: 명세부터 깨우치는 FILEAPI](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864d54d8b42a0f2a8b4606/html5/thumbnails/3.jpg)
File Writer
File System
File API는 로컬 파일에 액세스만 가능한 API다. 따라서 파일을 생성하거나 쓰고싶다면 File Writer API의 사양을, 디렉터리를 생성하거나 삭제하는 등 파일 시스템 작업을 하고 싶다면 File System API의 사양을 살펴 봐야한다 하지만 아쉽게도 File API는 대부분의 브라우저에서 지원하지만 File Writer와 File System은 대부분 지원하지 않는다
![Page 4: 명세부터 깨우치는 FILEAPI](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864d54d8b42a0f2a8b4606/html5/thumbnails/4.jpg)
File Reader File Blob FileList
![Page 5: 명세부터 깨우치는 FILEAPI](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864d54d8b42a0f2a8b4606/html5/thumbnails/5.jpg)
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의 약자로 이진 데이터(이미지와 음성 그리고 기타 멀티미디어 파일 등)를 만들거나 객체로 조작 하기 위해 사용하는 형식 으로 보통 커다란 파일을 의미 한다.
![Page 6: 명세부터 깨우치는 FILEAPI](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864d54d8b42a0f2a8b4606/html5/thumbnails/6.jpg)
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'});
![Page 7: 명세부터 깨우치는 FILEAPI](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864d54d8b42a0f2a8b4606/html5/thumbnails/7.jpg)
FILE INTERFACE
File는 Blob를 상속받아 몇 가지 프로퍼티를 추가한 객체다.
Chain
Properties
lastModifiedDate : Date 파일을 마지막으로 수정한 날짜를 나타낸다.
name : string 파일의 이름을 나타낸다.
![Page 8: 명세부터 깨우치는 FILEAPI](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864d54d8b42a0f2a8b4606/html5/thumbnails/8.jpg)
Properties
Method
length : number File 객체의 갯수를 읽기 전용 값으로 나타낸다.
Item(index : long) => File?
index에 해당하는 File 객체를 반환한다. 존재하지 않으면 null을 반환한다. Input 태그로 접근할 수 있는 files
프로퍼티는 FileList Interface로 구현되어 있으며 이는 1개의 프로퍼티와 1개의 메소드로 이루어져 있다.
FILELIST INTERFACE
![Page 9: 명세부터 깨우치는 FILEAPI](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864d54d8b42a0f2a8b4606/html5/thumbnails/9.jpg)
Properties
Method
length : number File 객체의 갯수를 읽기 전용 값으로 나타낸다.
Item(index : long) => File?
index에 해당하는 File 객체를 반환한다. 존재하지 않으면 null을 반환한다. Input 태그로 접근할 수 있는 files
프로퍼티는 FileList Interface로 구현되어 있으며 이는 1개의 프로퍼티와 1개의 메소드로 이루어져 있다.
FILELIST INTERFACE Example <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>
![Page 10: 명세부터 깨우치는 FILEAPI](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864d54d8b42a0f2a8b4606/html5/thumbnails/10.jpg)
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 파일 읽기 완료
![Page 11: 명세부터 깨우치는 FILEAPI](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864d54d8b42a0f2a8b4606/html5/thumbnails/11.jpg)
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
읽기를 시작할 때 발생하는 이벤트 읽는 중 정기적으로 발생하는 이벤트
읽기에 성공했을 때 발생하는 이벤트 읽기에 실패했을 때 발생하는 이벤트
읽기를 중지했을 대 발생하는 이벤트 읽기가 완료됐을 때 발생하는 이벤트
(성공/실패 여부와 상관없이 발생)
![Page 12: 명세부터 깨우치는 FILEAPI](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864d54d8b42a0f2a8b4606/html5/thumbnails/12.jpg)
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...};
![Page 13: 명세부터 깨우치는 FILEAPI](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864d54d8b42a0f2a8b4606/html5/thumbnails/13.jpg)
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
![Page 14: 명세부터 깨우치는 FILEAPI](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864d54d8b42a0f2a8b4606/html5/thumbnails/14.jpg)
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);
![Page 15: 명세부터 깨우치는 FILEAPI](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864d54d8b42a0f2a8b4606/html5/thumbnails/15.jpg)
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};
![Page 16: 명세부터 깨우치는 FILEAPI](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864d54d8b42a0f2a8b4606/html5/thumbnails/16.jpg)
background : http://goo.gl/ptr6dL
FILEAPI
DEM
O
이미지 파일 업로드
텍스트 파일 만들기
![Page 17: 명세부터 깨우치는 FILEAPI](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864d54d8b42a0f2a8b4606/html5/thumbnails/17.jpg)
background : http://goo.gl/ptr6dL
FILEAPI
DEM
O
이미지 파일 업로드
텍스트 파일 만들기
Example https://github.com/UYEONG/FileUploaderDemo
![Page 18: 명세부터 깨우치는 FILEAPI](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864d54d8b42a0f2a8b4606/html5/thumbnails/18.jpg)
background : http://goo.gl/5eW3he
CAN I USE
![Page 19: 명세부터 깨우치는 FILEAPI](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864d54d8b42a0f2a8b4606/html5/thumbnails/19.jpg)
BLOB
icon : http://goo.gl/TQfYy1 data : http://caniuse.com/blobbuilder
8 ~
6 ~
6 ~
10 ~
3 ~
6 ~
![Page 20: 명세부터 깨우치는 FILEAPI](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864d54d8b42a0f2a8b4606/html5/thumbnails/20.jpg)
icon : http://goo.gl/TQfYy1 data : http://caniuse.com/fileapi
6 ~
3.6 ~
5.1 ~
10 ~
3 ~
5.1 ~
FILE
![Page 21: 명세부터 깨우치는 FILEAPI](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864d54d8b42a0f2a8b4606/html5/thumbnails/21.jpg)
icon : http://goo.gl/TQfYy1 data : http://caniuse.com/filereader
6 ~
3.6 ~
6 ~
10 ~
3 ~
6 ~
FILE READER
![Page 22: 명세부터 깨우치는 FILEAPI](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864d54d8b42a0f2a8b4606/html5/thumbnails/22.jpg)
icon : http://goo.gl/TQfYy1 test : http://goo.gl/STfHCS
30.0
FileList
FileList FileList.item() FileList.length
Blob
Blob Blob.size Blob.type Blob.slice() Blob.close()
File
File File.name File.lastModifiedDate
FileReader
FileReader FileReader.readAsArrayBuffer() FileReader.readAsText() FileReader.readAsDataUrl() FileReader.abort()
async read methods
FileReader.EMPTY FileReader.LOADING FileReader.DONE FileReader.readyState
states
FileReader.result FileReader.error
file or Blob data
FileReader.onloadstart FileReader.onprogress FileReader.onload FileReader.onabort FileReader.onerror FileReader.onloadend
event handler attributes
![Page 23: 명세부터 깨우치는 FILEAPI](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864d54d8b42a0f2a8b4606/html5/thumbnails/23.jpg)
icon : http://goo.gl/TQfYy1 test : http://goo.gl/STfHCS
30.0
FileList
FileList FileList.item() FileList.length
Blob
Blob Blob.size Blob.type Blob.slice() Blob.close()
File
File File.name File.lastModifiedDate
FileReader
FileReader FileReader.readAsArrayBuffer() FileReader.readAsText() FileReader.readAsDataUrl() FileReader.abort()
async read methods
FileReader.EMPTY FileReader.LOADING FileReader.DONE FileReader.readyState
states
FileReader.result FileReader.error
file or Blob data
FileReader.onloadstart FileReader.onprogress FileReader.onload FileReader.onabort FileReader.onerror FileReader.onloadend
event handler attributes
![Page 24: 명세부터 깨우치는 FILEAPI](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864d54d8b42a0f2a8b4606/html5/thumbnails/24.jpg)
icon : http://goo.gl/TQfYy1 test : http://goo.gl/STfHCS
7
FileList
FileList FileList.item() FileList.length
Blob
Blob Blob.size Blob.type Blob.slice() Blob.close()
File
File File.name File.lastModifiedDate
FileReader
FileReader FileReader.readAsArrayBuffer() FileReader.readAsText() FileReader.readAsDataUrl() FileReader.abort()
async read methods
FileReader.EMPTY FileReader.LOADING FileReader.DONE FileReader.readyState
states
FileReader.result FileReader.error
file or Blob data
FileReader.onloadstart FileReader.onprogress FileReader.onload FileReader.onabort FileReader.onerror FileReader.onloadend
event handler attributes
![Page 25: 명세부터 깨우치는 FILEAPI](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864d54d8b42a0f2a8b4606/html5/thumbnails/25.jpg)
icon : http://goo.gl/TQfYy1 test : http://goo.gl/STfHCS
10/11
FileList
FileList FileList.item() FileList.length
Blob
Blob Blob.size Blob.type Blob.slice() Blob.close()
File
File File.name File.lastModifiedDate
FileReader
FileReader FileReader.readAsArrayBuffer() FileReader.readAsText() FileReader.readAsDataUrl() FileReader.abort()
async read methods
FileReader.EMPTY FileReader.LOADING FileReader.DONE FileReader.readyState
states
FileReader.result FileReader.error
file or Blob data
FileReader.onloadstart FileReader.onprogress FileReader.onload FileReader.onabort FileReader.onerror FileReader.onloadend
event handler attributes
![Page 26: 명세부터 깨우치는 FILEAPI](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864d54d8b42a0f2a8b4606/html5/thumbnails/26.jpg)
icon : http://goo.gl/TQfYy1 test : http://goo.gl/STfHCS
Android 2.x
FileList
FileList FileList.item() FileList.length
Blob
Blob Blob.size Blob.type Blob.slice() Blob.close()
File
File File.name File.lastModifiedDate
FileReader
FileReader FileReader.readAsArrayBuffer() FileReader.readAsText() FileReader.readAsDataUrl() FileReader.abort()
async read methods
FileReader.EMPTY FileReader.LOADING FileReader.DONE FileReader.readyState
states
FileReader.result FileReader.error
file or Blob data
FileReader.onloadstart FileReader.onprogress FileReader.onload FileReader.onabort FileReader.onerror FileReader.onloadend
event handler attributes
![Page 27: 명세부터 깨우치는 FILEAPI](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864d54d8b42a0f2a8b4606/html5/thumbnails/27.jpg)
icon : http://goo.gl/TQfYy1 test : http://goo.gl/STfHCS
Android 4.x
FileList
FileList FileList.item() FileList.length
Blob
Blob Blob.size Blob.type Blob.slice() Blob.close()
File
File File.name File.lastModifiedDate
FileReader
FileReader FileReader.readAsArrayBuffer() FileReader.readAsText() FileReader.readAsDataUrl() FileReader.abort()
async read methods
FileReader.EMPTY FileReader.LOADING FileReader.DONE FileReader.readyState
states
FileReader.result FileReader.error
file or Blob data
FileReader.onloadstart FileReader.onprogress FileReader.onload FileReader.onabort FileReader.onerror FileReader.onloadend
event handler attributes
![Page 28: 명세부터 깨우치는 FILEAPI](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864d54d8b42a0f2a8b4606/html5/thumbnails/28.jpg)
icon : http://goo.gl/TQfYy1 test : http://goo.gl/STfHCS
IOS 6
FileList
FileList FileList.item() FileList.length
Blob
Blob Blob.size Blob.type Blob.slice() Blob.close()
File
File File.name File.lastModifiedDate
FileReader
FileReader FileReader.readAsArrayBuffer() FileReader.readAsText() FileReader.readAsDataUrl() FileReader.abort()
async read methods
FileReader.EMPTY FileReader.LOADING FileReader.DONE FileReader.readyState
states
FileReader.result FileReader.error
file or Blob data
FileReader.onloadstart FileReader.onprogress FileReader.onload FileReader.onabort FileReader.onerror FileReader.onloadend
event handler attributes
![Page 29: 명세부터 깨우치는 FILEAPI](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864d54d8b42a0f2a8b4606/html5/thumbnails/29.jpg)
icon : http://goo.gl/TQfYy1 test : http://goo.gl/STfHCS
FileList
FileList FileList.item() FileList.length
Blob
Blob Blob.size Blob.type Blob.slice() Blob.close()
File
File File.name File.lastModifiedDate
FileReader
FileReader FileReader.readAsArrayBuffer() FileReader.readAsText() FileReader.readAsDataUrl() FileReader.abort()
async read methods
FileReader.EMPTY FileReader.LOADING FileReader.DONE FileReader.readyState
states
FileReader.result FileReader.error
file or Blob data
FileReader.onloadstart FileReader.onprogress FileReader.onload FileReader.onabort FileReader.onerror FileReader.onloadend
event handler attributes
IOS 7
![Page 30: 명세부터 깨우치는 FILEAPI](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864d54d8b42a0f2a8b4606/html5/thumbnails/30.jpg)
명 세
W3C FileAPI 최신 사양 : www.w3.org/TR/FileAPI/ W3C FileAPI 편집자 초안 : dev.w3.org/2006/webapi/FileAPI/ W3C FileWriterAPI : www.w3.org/TR/file-writer-api/ W3C FileSystemAPI : www.w3.org/TR/file-system-api/ W3C Blob Interface : www.w3.org/TR/FileAPI/#constructorBlob W3C File interface : www.w3.org/TR/FileAPI/#file-constructor W3C FileList Interface : www.w3.org/TR/FileAPI/#filelist-section W3C FileReader Interface : www.w3.org/TR/FileAPI/#FileReader-interface=
MDN&MSDN
MDN Blob : developer.mozilla.org/en-US/docs/Web/API/Blob MDN File : developer.mozilla.org/en-US/docs/Web/API/File MDN FileList : developer.mozilla.org/en-US/docs/Web/API/FileList MDN FileReader : developer.mozilla.org/en-US/docs/Web/API/FileReader MSDN FileList : msdn.microsoft.com/en-us/library/windows/apps/xaml/hh453213.aspx MSDN File : msdn.microsoft.com/en-us/library/windows/apps/xaml/hh453204.aspx MSDN Blob : msdn.microsoft.com/en-us/library/windows/apps/xaml/hh453178.aspx MSDN FileReader : msdn.microsoft.com/en-us/library/windows/apps/xaml/hh453225.aspx
caniuse
FileAPI : http://caniuse.com/filesystem FileSystem : http://caniuse.com/filesystem Blob constructor : http://caniuse.com/blobbuilder FileReader : http://caniuse.com/filereader
![Page 31: 명세부터 깨우치는 FILEAPI](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864d54d8b42a0f2a8b4606/html5/thumbnails/31.jpg)
Thank you