JavaScript/File Upload
Der Titel dieses Artikels ist mehrdeutig. Unter file upload (deutsch auch: Datei-Upload) wird das Hochladen von Dateien auf einen Server verstanden. Im SELFHTML-Wiki wird dies an drei Stellen besprochen:
- HTML/Tutorials/Formulare/input/Datei-Upload – alles zu
input type="file" - JavaScript/File Upload
- PHP/Tutorials/File Upload, sehr ausführlicher Artikel mit dem Schwerpunkt Sicherheit
Mit der HTML5 File Upload API kommt nun eine neue Möglichkeit, Dateien vom heimischen Rechner auf einen Webserver hochzuladen.[1]
Details: caniuse.com
Interessant ist hierbei vor allem, dass die APIs die Möglichkeit bieten den Uploadfortschritt zu verfolgen, Thumbnails (Miniaturansichten) der Dateien anzuzeigen, sowie der Einsatz von Drag and Drop. Letzteres ist sehr bequem um Dateien vom Desktop oder aus Ordnern direkt in die Webanwendung zu ziehen, in die die Datei geladen werden soll.
Inhaltsverzeichnis
Multi Upload von Dateien[Bearbeiten]
function dateiauswahl(evt) {
// FileList-Objekt des input-Elements auslesen, auf dem
// das change-Event ausgelöst wurde (event.target)
var files = evt.target.files;
// Deklarierung eines Array Objekts mit Namen "fragmente". Hier werden die Bausteine
// für die erzeugte Listenausgabe gesammelt.
var fragmente = [];
// Zählschleife; bei jedem Durchgang den Namen, Typ und
// die Dateigröße der ausgewählten Dateien zum Array hinzufügen
for (var i = 0, f; f = files[i]; i++) {
fragmente.push('<li><strong>', f.name, '</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes</li>');
}
// Alle Fragmente im fragmente Array aneinanderhängen, in eine unsortierte Liste einbetten
// und das alles als HTML-Inhalt in das output-Elements mit id='dateiListe' einsetzen.
document.getElementById('dateiListe').innerHTML = '<ul>' + fragmente.join('') + '</ul>';
}
// UI-Events erst registrieren wenn das DOM bereit ist!
document.addEventListener("DOMContentLoaded", function() {
// Falls neue Eingabe, neuer Aufruf der Auswahlfunktion
document.getElementById('dateien').addEventListener('change', dateiauswahl, false);
});
Für die Auswahl von Dateien eignet sich ein input type="file" besonders, das hier bereitgestellt wird. Die neue Option multiple sorgt dabei dafür, dass auch wirklich mehrere Dateien ausgewählt werden können. Anschließend wird in der Funktion dateiauswahl() ein Array fragmente angelegt. In diesem Array werden mittels einer Zählschleife für jede ausgewählte Datei deren Dateiname, -typ, sowie Größe gespeichert (über die Arraymethode push()).
Zusätzlich werden vor und hinter den Dateiattributen <li> und <strong> Tags mitgespeichert, die bei der Ausgabe für eine schönere Ansicht sorgen. Dies ist natürlich kein Muss.
document.getElementById('list').innerHTML = '<ul>' + fragmente.join('') + '</ul>'; setzt all diese Fragmente mittels der Arraymethode join() zu einer langen Zeichenkette zusammen. Durch das Umschließen mit <ul>...</ul> wird daraus eine ungeordnete Liste, die dann als HTML-Inhalt in das output-Element mit der id 'dateiListe' eingesetzt wird. Dadurch werden die ausgelesenen Datei-Informationen in fetter Schrift als Liste dargestellt.
Die Registrierung des change-Events, die zum Aufruf der dateiauswahl-Funktion erforderlich ist, erfolgt in einem DOMContentLoaded-Handler, damit das Script im <head> der Seite stehen kann.
Auswahl mit Drag und Drop[Bearbeiten]
function dateiauswahl(evt) {
evt.stopPropagation();
evt.preventDefault();
var gewaehlteDateien = evt.dataTransfer.files; // FileList Objekt
var output = [];
for (var i = 0, f; f = gewaehlteDateien[i]; i++) {
output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModified.toLocaleDateString(), '</li>');
}
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy';
}
// Initialisiere Drag&Drop EventListener
var dropZone = document.getElementById('dropzone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', dateiauswahl, false);
Hier können Sie Bilder und Dateien aus Ihrem Betriebssystem bequem mit der Maus (Drag & Drop) ziehen und im div mit der id dropzone ablegen.
Anschließend wird die ausgewählte Datei wie im Beispiel 1 mit einigen Eigenschaften aufgelistet.
Direkter Upload einer einzelnen Datei an einen Server[Bearbeiten]
function dateiupload(evt) {
var dateien = evt.target.files; // FileList objekt
// erste Datei auswählen (wichtig, weil IMMER ein FileList Objekt generiert wird)
var uploadDatei = dateien[0];
// Ein Objekt um Dateien einzulesen
var reader = new FileReader();
var senddata = new Object();
// Auslesen der Datei-Metadaten
senddata.name = uploadDatei.name;
senddata.date = uploadDatei.lastModified;
senddata.size = uploadDatei.size;
senddata.type = uploadDatei.type;
// Wenn der Dateiinhalt ausgelesen wurde...
reader.onload = function(theFileData) {
senddata.fileData = theFileData.target.result; // Ergebnis vom FileReader auslesen
/*
Code für AJAX-Request hier einfügen
*/
}
// Die Datei einlesen und in eine Data-URL konvertieren
reader.readAsDataURL(uploadDatei);
}
Dank der Möglichkeit, eine Datei als Data-URL einzulesen, ist es möglich, selbst mit einem gewöhnlichen Webformular eine Datei an einen Server zu senden.
Auswahl mit Bildvorschau[Bearbeiten]
function dateiauswahl(evt) {
var dateien = evt.target.files; // FileList object
// Auslesen der gespeicherten Dateien durch Schleife
for (var i = 0, f; f = dateien[i]; i++) {
// nur Bild-Dateien
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
// erzeuge Thumbnails.
var vorschau = document.createElement('img');
vorschau.className = 'thumb';
vorschau.src = e.target.result;
vorschau.title = theFile.name;
document.getElementById('list').insertBefore(vorschau, null);
};
})(f);
// Bilder als Data URL auslesen.
reader.readAsDataURL(f);
}
}
// Auf neue Auswahl reagieren und gegebenenfalls Funktion dateiauswahl neu ausführen.
document.getElementById('files').addEventListener('change', dateiauswahl, false);
In diesem Beispiel werden von den hochzuladenden Bildern Vorschaubilder erstellt (Thumbnailing), die dann im Ausgabefeld output-Element angezeigt werden.
Auswahl mit Textvorschau[Bearbeiten]
function dateiauswahl(evt) {
var dateien = evt.target.files; // FileList object
// Auslesen der gespeicherten Dateien durch Schleife
for (var i = 0, f; f = dateien[i]; i++) {
// nur TXT-Dateien
if (!f.type.match('text/plain')) {
continue;
}
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
// erzeuge "Thumbnails"
var vorschau = document.createElement('p');
vorschau.className = 'thumb';
vorschau.src = e.target.result;
vorschau.title = theFile.name;
document.getElementById('list').insertBefore(vorschau, null);
};
})(f);
// Klartext mit Zeichenkodierung UTF-8 auslesen.
reader.readAsText(f, utf8);
}
}
// Auf neue Auswahl reagieren und gegeenenfalls Funktion dateiauswahl neu ausführen.
document.getElementById('files').addEventListener('change', dateiauswahl, false);
In diesem Beispiel wird von den hochzuladenden Texten der komplette Inhalt übernommen, welcher dann im Ausgabefeld output-Element angezeigt wird.
(billiger) Hex-Viewer im Browser[Bearbeiten]
function dateiauswahl(evt) {
var dateien = evt.target.files; // FileList object
// Auslesen der gespeicherten Dateien durch Schleife
for (var i = 0, f; f = dateien[i]; i++) {
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
// Bytedaten übernehmen
var byteBlock = e.target.result; // ArrayBuffer Objekt
// ein Objekt um den Byteblock auszulesen
var dataViewer = new DataView(byteBlock);
var hexView = "";
// Hex-Werte übernehmen
for (var j = 0; j < f.size; j++) {
hexView += parseInt(dataViewer.getUint8(j), 16) + " ";
}
// Das Leerzeichen am Ende entfernen
hexView = hexView.substr(0,hexView.length-1);
// erzeuge "Thumbnails"
var vorschau = document.createElement('p');
vorschau.className = 'thumb';
vorschau.src = hexView
vorschau.title = theFile.name;
document.getElementById('list').insertBefore(vorschau, null);
};
})(f);
// Datei als ByteArray auslesen auslesen.
reader.readAsArrayBuffer(f);
}
}
// Auf neue Auswahl reagieren und gegebenenfalls Funktion dateiauswahl neu ausführen.
document.getElementById('files').addEventListener('change', dateiauswahl, false);
Hiermit können die Hexwerte jeder beliebigen Datei ausgelesen werden.
Quellen[Bearbeiten]
- ↑ W3C: File Upload API
Weblinks[Bearbeiten]
- html5rocks: Reading files in JavaScript using the File APIs
- html5demos: File API
- hexed.it: HexEditor
- MDN: FileReader
- MDN: ArrayBuffer
- MDN: DataView
