Einige globale Attribute zum Schluss - HTML5 - page 307

var drop = function(evt) {
var file = evt.dataTransfer.files[0];
};
Ab jetzt befinden wir uns in der FileAPI , denn das Attribut files repräsentiert
ein sogenanntes FileList -Objekt, das ist ein Array aller File -Objekte, die an
der aktuellen Drag&Drop-Operation beteiligt waren. Auch wenn das Demo von
Paul Rouget beim Laden mehrere Bilder gleichzeitig erlaubt, so darf bei uns
nur ein Bild in der Drop-Zone abgelegt werden - die Referenz zu dieser Datei
findet sich damit immer in files[0] .
Für die verkleinerte Vorschau des Bildes verwenden wir, wie auch schon im
entsprechenden Abschnitt des Canvas-Kapitels (vergleiche Abschnitt 5.12,
Base64-Kodieren mit »canvas.toDataURL()«), eine data: URI als src -Attribut,
die wir über die FileAPI erzeugen. Zuerst definieren wir ein neues FileReader -
Objekt, dann laden wir über readAsDataURL() das Bild asynchron in den Arbeits-
speicher und weisen am Ende des Ladevorgangs dem Bild die resultierende
data: URI als src -Attribut zu. Der JavaScript-Code dafür ist recht kurz und
übersichtlich:
var dataURLReader = new FileReader();
dataURLReader.onloadend = function() {
imgElem.src = dataURLReader.result;
imgInfo.innerHTML = file.name+' ('+_inKb(file.size)+')';
}
dataURLReader.readAsDataURL(file);
Die Breite des Vorschaubilds wird im CSS-Stylesheet mit width: 250px fest-
gelegt, die Höhe wird vom Browser in der Folge automatisch angepasst. Die
Beschriftung unterhalb des Bilds spiegelt die FileAPI -Attribute file.name und
file.size wider, wobei zur Umrechnung der Dateigröße in Kilobytes die Byte-
Angaben in file.size durch 1024 dividiert werden müssen - die Hilfsfunktion
_inKb() erledigt das für uns und fügt gleichzeitig die Zeichenkette KB am Ende
des berechneten Wertes hinzu.
Zum Auslesen der EXIF-Informationen benötigen wir die Datei in binärer Form.
Analog zu readAsDataURL() verwenden wir jetzt readAsBinaryString() und er-
halten im onload -Callback unser gewünschtes Resultat. Damit können wir al-
lerdings noch nicht auf die EXIF-Daten zugreifen, denn diese verstecken sich
irgendwo im binären Code und müssen erst extrahiert werden. An dieser Stelle
sei Jacob Seidelin gedankt, denn erst seine JavaScript-Implementierung zum
Auslesen der EXIF-Daten macht dieses Beispiel möglich.