HTML5 Rocks

HTML5 Rocks

HTML5 Funktionen

Dateizugriff

HTML5 stellt extrem leistungsstarke APIs für die Interaktion mit binären Daten und dem lokalen Dateisystem der Nutzer bereit. Die File APIs erlauben es Webanwendungen unter anderem, Dateien (a)synchron zu lesen, beliebige Blobs zu erstellen, Dateien an einen temporären Speicherort zu schreiben, Dateiverzeichnisse rekursiv zu lesen, Dateien per Drag & Drop vom Desktop in den Browser zu verschieben und binäre Daten mithilfe von XMLHttpRequest2 hochzuladen.

Mit den File APIs können Sie beispielsweise eine Miniaturansicht von Bildern in der Vorschau anzeigen, während diese an den Server gesendet werden, oder es einer App ermöglichen, einen Dateiverweis zu speichern, während der Nutzer offline ist. Mit dem Web Audio API kann Ihre App eine MP3-Datei lesen und während der Wiedergabe eine visuelle Darstellung des Titels anzeigen. Außerdem können Sie mithilfe der clientseitigen Logik überprüfen, ob der Mimetyp eines Uploads mit seiner Dateiendung übereinstimmt, oder die Größe von Uploads beschränken.

Neuerungen

Demos

HTML5 Demos: Drag files from the desktop to the browser

In der Wildnis

GMail
MugTug Darkroom

Ressourcen

  • W3C Spec: File In dieser W3C-Spezifikation werden die File APIs definiert: File, FileList, FileReader, Blob.
  • W3C Spec: FileSystem APIs In dieser W3C-Spezifikation werden die FileSystem APIs definiert, die eine Schnittstelle zum Lesen und Schreiben von Dateien und Verzeichnissen in einem Sandbox-Dateisystem bereitstellen.
  • W3C Spec: FileWriter In dieser W3C-Spezifikation wird das FileWriter API definiert, das eine Schnittstelle zum Schreiben in Dateien aus Webanwendungen bereitstellt.
  • W3C Spec: ProgressEvents In dieser W3C-Spezifikation wird das ProgressEvent definiert. Dadurch werden asynchrone Updates zum Fortschritt eines Datei-Lesevorgangs erstellt.
  • WHATWG Spec: Drag and Drop In dieser WHATWG-Spezifikation werden die nativen Drag & Drop-APIs für HTML5 definiert.
  • Mozilla Hacks: Interactive file uploads Anleitung zur Verwendung von Drag & Drop, FileAPI und XMLHttpRequest zum Hochladen von Dateien
  • MDC: Drag Operations Referenz zu den verschiedenen Ziehfunktionen, die im DnD API verfügbar sind
  • HTML5 Doctor: Native Drag and Drop Artikel über die Verwendung der nativen Drag & Drop-Funktion in HTML5 mit Informationen zum Drag & Drop von Dateien über den Desktop