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

    
    
      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: