명세부터 깨우치는 fileapi

background : http://goo.gl/J1GgP1

명세부터 깨우치는

FILEAPI

FILEAPI INTERFACE

File Reader

File

Blob

FileList 편집자 초안이 작성되었고 최신 버전은 2013년 9월 12일에 작성

파일의 정보나 내용을 가져올 수 있고 이를 서버로 전송할 수 있다. 이 API를 이용하면 자바스크립트에서 로컬 파일에 액세스 가능하고

되었으며 표준화 제정 단계는 Working Draft다.

File API는 파일 개체를 표현하기 위한 API이다. 2006년도에

File Writer

File System

File API는 로컬 파일에 액세스만 가능한 API다. 따라서 파일을 생성하거나 쓰고싶다면 File Writer API의 사양을, 디렉터리를 생성하거나 삭제하는 등 파일 시스템 작업을 하고 싶다면 File System API의 사양을 살펴 봐야한다 하지만 아쉽게도 File API는 대부분의 브라우저에서 지원하지만 File Writer와 File System은 대부분 지원하지 않는다

File Reader File Blob FileList

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의 약자로 이진 데이터(이미지와 음성 그리고 기타 멀티미디어 파일 등)를 만들거나 객체로 조작 하기 위해 사용하는 형식 으로 보통 커다란 파일을 의미 한다.

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'});

FILE INTERFACE

File는 Blob를 상속받아 몇 가지 프로퍼티를 추가한 객체다.

Chain

Properties

lastModifiedDate : Date 파일을 마지막으로 수정한 날짜를 나타낸다.

name : string 파일의 이름을 나타낸다.

Properties

Method

length : number File 객체의 갯수를 읽기 전용 값으로 나타낸다.

Item(index : long) => File?

index에 해당하는 File 객체를 반환한다. 존재하지 않으면 null을 반환한다. Input 태그로 접근할 수 있는 files

프로퍼티는 FileList Interface로 구현되어 있으며 이는 1개의 프로퍼티와 1개의 메소드로 이루어져 있다.

FILELIST INTERFACE

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>

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 파일 읽기 완료

Method

FILE

INTERFACE READER


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

읽기를 시작할 때 발생하는 이벤트 읽는 중 정기적으로 발생하는 이벤트

읽기에 성공했을 때 발생하는 이벤트 읽기에 실패했을 때 발생하는 이벤트

읽기를 중지했을 대 발생하는 이벤트 읽기가 완료됐을 때 발생하는 이벤트

(성공/실패 여부와 상관없이 발생)

Method

FILE

INTERFACE READER



readAsText(blob : Blob [, encoding] => void 텍스트 형식으로 파일을 읽는다.


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...};

Method

FILE

INTERFACE

READER

FileReader는 비동기적으로 File을 읽지만 FileReaderSync는 동기적으로 읽는다. 비동기적인 방법은 이벤트 핸들러를 사용해야하지만 동기적인 방법은 그럴 필요가 없으므로 구현이 단순해진다. FileReaderSync는 WebWorkers 환경에서만 사용할 수 있다.




SYNC

Method

FILE

INTERFACE

READER





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);

Method

FILE

INTERFACE

READER





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};

background : http://goo.gl/ptr6dL

FILEAPI

DEM

O

이미지 파일 업로드

텍스트 파일 만들기

background : http://goo.gl/ptr6dL

FILEAPI

DEM

O

이미지 파일 업로드

텍스트 파일 만들기

Example https://github.com/UYEONG/FileUploaderDemo

background : http://goo.gl/5eW3he

CAN I USE

BLOB

icon : http://goo.gl/TQfYy1 data : http://caniuse.com/blobbuilder

8 ~

6 ~

6 ~

10 ~

3 ~

6 ~

icon : http://goo.gl/TQfYy1 data : http://caniuse.com/fileapi

6 ~

3.6 ~

5.1 ~

10 ~

3 ~

5.1 ~

FILE

icon : http://goo.gl/TQfYy1 data : http://caniuse.com/filereader

6 ~

3.6 ~

6 ~

10 ~

3 ~

6 ~

FILE READER

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


7

FileList


Blob


File


FileReader


async read methods


states


file or Blob data




10/11

FileList


Blob


File


FileReader


async read methods


states


file or Blob data




Android 2.x

FileList


Blob


File


FileReader


async read methods


states


file or Blob data




Android 4.x

FileList


Blob


File


FileReader


async read methods


states


file or Blob data




IOS 6

FileList


Blob


File


FileReader


async read methods


states


file or Blob data




FileList


Blob


File


FileReader


async read methods


states


file or Blob data



IOS 7

명 세

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

Thank you

명세부터 깨우치는 fileapi

Technology