HTML5 File API

Angelina Neumann                      08.09.2015

File API

Verwendung

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:

Quellen