HTML5 File Upload API 활용

File API란 웹 애플리케이션이 로컬 파일의 내용에 접근할 수 있도록 하는 API입니다.
HTML5 File API의 큰 특징은 다음과 같습니다.

• 첫번째, File 인터페이스로 파일의 이름이나 크기 등 기본적인 메타 데이터에 접근할 수 있습니다.

  속성/메서드	설명
  name	파일 이름
  type	파일의 MIME 타입(알 수 없을 때는 null)
  size	파일 크기
  lastModifiedDate	파일 마지막 수정일
  slice(start, length)	시작 위치와 종료 위치(단위는 바이트)를 지정하여 파일의 내용을 잘라내 새로운 Blob객체를 만듦. Blob은 바이너리 데이터를 나타내는 형으로 파일과 마찬가지로 size 속성, slice() 메서드를 가짐(File은 Blob의 서브 인터페이스)

• 두번째, FileReader 인터페이스로 파일의 내용을 읽어들이는 기능을 제공합니다. (주요 속성과 메서드만 발췌)

  속성/메서드	설명
  readAsBinaryString(fileBlob)	파일 내용을 읽어들여 바이너리 문자열로 설정
  readAsText(fileBlob, encoding)	파일 내용을 읽어들여 문자열로 설정 두번째 인자에는 파일의 문자 인코딩을 지정할 수 있음(생략 시는 UTF-8)
  readAsDataURL(file)	파일 내용을 읽어들여 dataURL 형식의 문자열로 설정
  result	읽어들인 파일의 내용
  error	에러 발생 시의 에러 정보
  onload	읽어들이기에 성공했을 때 호출되는 이벤트 핸들러. "load" 이벤트에 대응
  onprogress	읽어들이기의 진행 상황을 얻을 수 있는 이벤트 핸들러. "progress" 이벤트에 대응하며 이벤트 핸들러의 인수는 ProgressEvent형
  onerror	읽어들이기 에러 시에 호출되는 이벤트 핸들러. "error" 이벤트에 대응