HTML5 Rocks

HTML5 Rocks

HTML5 특징

파일 접근

HTML5는 바이너리 데이터와 사용자 로컬 파일 시스템과 상호작용을 위한 정말 강력한 API를 지원합니다. 웹앱은 파일 API로 동기/비동기로 파일을 읽고, 맘대로 Blob을 생성하며, 임의의 위치에 파일을 작성하고, 파일의 디렉토리를 재귀호출하고, 데스크탑에서 브라우저로 드래그 앤 드롭을 실행하고, XMLHttpRequest2를 사용해서 바이너리 파일을 업로드 합니다.

예를 들어, 파일 API를 이용해서 서버로 전송중인 이미지의 썸네일을 생성하거나, 오프라인에서 사용자가 참조한 파일을 저장할 수 있고 Web Audio API를 이용해서 .mp3 파일을 읽어서 플레이중인 노래의 비주얼라이제이션을 출력할 수 있습니다. 또한, 파일 확장자와 일치하는 업로드 MINE 타입 확인이나 업로드 용량 제한을 위한 클라이언트 쪽 로직에 사용할 수도 있습니다.

새로 나온 문서

데모

HTML5 Demos: Drag files from the desktop to the browser

적용 사례

GMail
MugTug Darkroom

참고자료

  • W3C Spec: File 이 W3C 규격은 File, FileList, FileReader, Blob와 같은 File API를 정의합니다.
  • W3C Spec: FileSystem APIs 이 W3C 규격은 안전한 파일시스템 상에서 파일과 디렉토리를 읽고 쓰는 인터페이스를 제공하는 FileSystem API를 정의합니다.
  • W3C Spec: FileWriter 이 W3C 규격은 웹 어플리케이션에서 파일을 저장하는 인터페이스인 FileWriter API를 정의합니다.
  • W3C Spec: ProgressEvents 이 W3C 규격은 비동기 방식으로 파일 읽기를 처리할 수 있는 ProgressEvent를 정의합니다.
  • WHATWG Spec: Drag and Drop 이 WHATWG 규격은 HTML5의 네이티브 드래그앤 드랍 API를 정의합니다.
  • Mozilla Hacks: Interactive file uploads 드래그앤 드랍, FileAPI 그리고 XMLHttpRequest를 이용하여 파일을 업로드하는 튜토리얼입니다.
  • MDC: Drag Operations 드래그앤 드랍 API에서 사용 가능한 다양한 드래그 옵션에 대한 자료
  • HTML5 Doctor: Native Drag and Drop HTM5의 네이티브 드래그앤 드랍을 이용하여 데스크톱으로 부터 파일을 드래그앤 드랍하는 방법에 대해 논의한 문서입니다.