Tes
h1 - h3 Tags
h1- Tag Klein und Großschreibung äöüß
h2- Tag Klein und Großschreibung äöüß
h3- Tag Klein und Großschreibung äöüß
Paragraph Text Klein und Großschreibung äöüß
Ohne- Tag Klein und Grossschreibung äöüßAlles in theme moon
HTML5 File API
HTML5 stellt 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 zu lesen, Dateien per Drag & Drop vom Desktop in den Browser zu verschieben und binäre Daten hochzuladen.
Das API lässt sich unterteilen in:
Dateien lesen und bearbeiten
Erstellen und schreiben
Verzeichnisse und Dateisystemzugriff
File API Schnittstellen zum Zugriff auf Dateien :
File - Stellt schreibgeschützte Informationen wie Name, Dateigröße, Mimetyp und einen Verweis auf den Dateihandle bereit.
FileList - eine arrayartige Folge von File-Objekten als Rückgabe des HTML5 "input type="file" multiple" Tags
Blob - Rohdaten einer Datei, zum Unterteilen in Bytebereiche
Dateien lesen:
FileReader
Bei Verwendung in Verbindung mit den obigen Datenstrukturen kann die FileReader-Schnittstelle dazu genutzt werden, eine Datei über die vertraute JavaScript-Ereignisbehandlung asynchron zu lesen. Dadurch können Sie den Fortschritt eines Lesevorgangs überwachen, Fehler ermitteln und feststellen, wann ein Ladevorgang abgeschlossen ist. Die APIs ähneln in vielerlei Hinsicht dem XMLHttpRequest-Ereignismodell.
Erstellen und schreiben:
BlobBuilder
FileWriter
HTML File API
Verzeichnisse und Dateisystemzugriff:
- DirectoryReader
- FileEntry/DirectoryEntry
- LocalFileSystem
Header h2
Top1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Top2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Top3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Header h2
Top1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Top2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Top3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
fileReader Demo HTML Part:
Demo Imagedatei Reader mit HTML5 und Filesystem API
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!"
}
});
}