Webmaster & Internet
Hier noch ein weiteres Tutorial in der HTML 5 File API-Reihe.
Das erste Tutorial war: Checksummen mit JavaScript & HTML 5 File API.
Wir bauen nicht direkt auf alles auf, aber es schadet auch nicht
Also, Ihr braucht nur einen Editor, einen aktuellen Browser und gute JavaScript-Kenntnisse.
Das Ziel des Tutorials
Wir werden uns ein einfaches Dateiauswahlfeld mit einer JavaScript-Upload-Funktion bauen.
Normalerweise schickt man ein Formular mit Dateien mit einem Submit-Button ab und der Browser übernimmt den Rest.
Wir wollen allerdings hier die neue HTML 5 File API für den Upload nutzen. Grob gesagt, kann man mit dieser API vom Benutzer ausgewählte Dateien einlesen und weiterverarbeiten. Oder auch- in unserem Fall - an ein serverseitiges Skript mit dem XMLHttpRequest-Object (AJAX) weiterschicken.
Das HTML-Gerüst
Unser HTML-Struktur (des Body-Tags) wird ganz einfach sein:
Code javascript:
1 2 3 4 5 6 7 8 9 10 11 | <h1>File upload with JavaScript</h1>
<hr />
Status: <span id="status">Ready</span>
<hr />
<form action="" method="post">
<input type="file" id="file_input" />
<button type="button" id="btnUpload">Upload with JS</button>
</form> |
Die Datei einlesen
Hier werden wir uns eine Art Wrapper-Funktion für das Einlesen der Datei erstellen.
Der erste Parameter ist das Datei-Objekt, auf das wir später kommen. Und da auch die File API mit Callback-Funktionen arbeitet, brauchen wir hier auch eine als zweiten Parameter.
Code javascript:
1 2 3 4 5 6 7 8 9 10 11 12 13 | function readFile(file, callback)
{
var reader = new FileReader();
reader.onload = function(evt)
{
document.getElementById('status').innerHTML = "Ready";
if (typeof callback=="function")
callback(file, evt);
};
reader.onprogress = updateProgress;
reader.onerror = errorHandler;
reader.readAsBinaryString( file );
} |
Wir weisen ihr zuerst eine Funktion für das onload-Event zu. Diese setzt unsere Statuskomponente auf "Ready" und führt die übergebene Callback-Funktion aus, sofern diese auch eine ist. Dieser übergeben wir 1.) Das Datei-Objekt und 2.) Das Event-Objekt des FileReaders.
In diesem Tutorial brauchen wir Datei-Objekt nicht mehr in der Callback-Funktion, allerdings war es so im ersten Tutorial, von daher habe ich die Funktion einfach übernommen.
Dahingegen beinhaltet das Event-Objekt für uns relevante Informationen und zwar die Datei als binären String in evt.target.result.
Außerdem brauchen wir noch die Funktionen für onprogress und onerror:
Code javascript:
1 2 3 4 5 6 7 8 9 | function updateProgress(evt)
{
document.getElementById('status').innerHTML = "Processing";
}
function errorHandler(evt)
{
document.getElementById('status').innerHTML = "Error ("+evt.target.error.code+")";
} |
Die Datei abschicken
Nun, wo wir eine Funktion für das Dateieinlesen haben, können wir fortfahren.
Zuerst werden wir den onclick-Eventhandler des Upload-Buttons in window.onload setzen:
Code javascript:
1 2 3 4 | window.onload = function()
{
document.getElementById("btnUpload").onclick = function()
{ |
Code javascript:
1 2 3 4 5 6 7 8 9 10 11 12 | var input = document.getElementById("file_input");
if ( typeof FileReader=="undefined" || !input.files)
{
alert("Your browser doesn't support the HTML 5 File API!");
return;
}
if ( input.files.length < 1 )
{
alert("Please select a file!");
return;
} |
Jede Datei ist ein Objekt von der Klasse file. Diese beinhaltet neben dem Namen der Datei auch das Datum der letzten Änderung und die Größe.
Jetzt wenden wir endlich unsere readFile()-Funktion an:
Code javascript:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | readFile(input.files[0], function(file, evt)
{
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function()
{
if (xhr.readyState==4 && xhr.status==200)
{
document.getElementById("status").innerHTML = xhr.responseText;
}
}
xhr.open("POST", "js_file_upload.php");
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("file="+ encodeURIComponent(evt.target.result) );
});
}
} |
Hierbei müssen wir auch noch den Content-Type setzen, sowie es auch bei "normalen" Formularen der Fall ist.
Wichtig ist, dass wir die Funktion encodeURIComponent() auf den Dateiinhalt anwenden. Denn sonst könnte eine Textdatei auch einen Ampersand ('&') enthalten und dies würde eine neue POST-Variable deklarieren und den folgenden Inhalt abschneiden.
Und falls die Anfrage erfolgreich war, geben wir die Rückgabe des PHP-Skriptes aus, wobei dieses in meinem Fall nur Data received ausgibt, falls die POST-Variable file gesetzt ist.
Anzumerken ist hierbei, dass nicht das $_FILES-Array benutzen werden kann, denn wir schicken unsere Datei als binären String als POST-Parameter, also in $_POST.
Weitere Vorschläge / Anmerkungen
Hier habe ich mal ein paar Vorschläge gesammelt:
- Fehler-Kontrolle mit einem MD5-Hash. Damit könnte man sehr leicht feststellen, ob bei der Übertragung der Datei ein Fehler aufgetreten ist. Das könnte man mit meinem ersten Tutorial (Checksummen mit JavaScript & HTML 5 File API) sehr gut verbinden!
- Überprüfung der Datei-Größe. Es könnte eventuell zu einem Buffer Overflow kommen, je nach dem wie die file-Objekte implementiert sind.
- Anzeige einer Progressbar mit dem neuen HTML 5-Element
.
- Bei PHP gibt eine sog. POST Content-Length-Beschränkung, die die maximale Länge der POST-Daten darstellt. Man könnte dieses Problem umgehen, indem man zum Beispiel die Daten erst in Stücke mittels slice() bzw. webkitSlice zerteilt und dann einzeln schickt.
Im Anhang findet Ihr einmal das minimale Beispiel, wie es hier im Tutorial besprochen wurde und noch ein komplettes Beispiel mit MD5-Hash-Kontrolle, IFrame-Nutzung bei großen Dateien und einer Progressbar.
Login
Bereiche
Kategorien
Forum - Webmaster & Internet
tutorials.de-Systemmitteilung