WebPres
HTML5 File API
Angelina Neumann 08.09.2015
File API
in HTML5 möglich Ermöglicht Zugriff auf lokale Dateien und Darstellung selbiger im HTML-Dokument (Dateiauswahl durch User über HTML < input > Tag oder Drag&Drop) arbeitet mit Event-Handlern W3C Working Draft neuste Version vom 21.04.2015
Verwendung
Zugriff auf lokale Dateien des BS und deren Attribute durch den Browser Dateien lassen sich vor einem Upload im Browserfenster darstellen und überprüfen (Rechtschreibprüfung etc.) Ermöglicht Clientseitige Dateioperationen z.B. Limitation der Größe des Uploads, Beschränken der hochzuladenden Dateitypen, Datum der letzten Änderung etc. Bilder, die hochgeladen werden sollen, können angezeigt werden (Thumbnail etc.)
File API Schnittstellen zum Zugriff auf Dateien :
File - Datei-Objekt; Attribute u.a. name, size, lastModified, type
FileList - arrayartige Folge von File-Objekten als Rückgabe des HTML < input type="file" > Tags
FileReader - liest eine Datei über JavaScript-Ereignisbehandlung asynchron; Ergebnis entweder als Daten-URL, String oder ArrayBuffer darstellbar
Binary Large Object (Blob) - Bytesequenz aus Rohdaten, erlaubt den Zugriff auf Bytebereiche innerhalb des Blob Objektes
Code Beispiel
FileReader Demo HTML Part:
Demo img mit HTML5 und File API im Browser anzeigen
Bilddatei auswählen:
FileReader Demo JavaScript Part:
window.onload = function() {
var fileInput = document.getElementById('fileInput');
var bildfenster = document.getElementById('picture_area');
fileInput.addEventListener('change', function(e) {
var file = fileInput.files[0];
var imageType = /image.*/;
if (file.type.match(imageType)) {
var reader = new FileReader();
reader.onload = function(e) {
bildfenster.innerHTML = "";
var img = new Image();
img.src = reader.result;
bildfenster.appendChild(img);
}
reader.readAsDataURL(file);
} else {
bildfenster.innerHTML = "File not supported!"
}
});
}
FileReader Demo:
Bilddatei auswählen:
Quellen
www.w3.org/TR/FileAPI/ https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications https://developer.mozilla.org/de/docs/Web/API/File https://developer.mozilla.org/de/docs/Web/API/FileReader www.scotch.io blog.teamtreehouse.com