Datei ohne Reload hochladen

Intro

Dateien hochzuladen sollte ansich kein Problem darstellen. Doch ist es oft lästig, wegen eines Uploads das komplette Formular abzusenden, die Datei zu speichern, und danach das Formular wieder aufzubauen, da noch andere Eingaben benötigt werden. Besonders, wenn beim ändern eines Datensatzes mehrere Bilder betroffen sind, wirkt diese Methode sehr anachronistisch.

Folgendes Tutorial zeigt, wie man dieses veraltete Verhalten ohne viel Aufwand umgehen kann.

Wenngleich diese Anleitung Javascript voraussetzt, ist es mit nur geringfügigen Änderungen möglich, auf diese Technologie zu verzichten.

Vorwissen

Kenntnisse in HTML, Javascript und einer serverseitigen Skriptsprache müssen zum Verständis dieser Anleitung vorhanden sein.

Interface

Formular

Das Formular ist relativ simpel:

<form name="filupload" method="POST" enctype="multipart/form-data" 
  target="fupframe" action="fileupload.php" onsubmit="uploadStart()">
<input type="file" name="file" id="file" />
<input type="submit" value="hochladen" />
</form>
		

Der Unterschied besteht lediglich in den target und onsubmit Tags.

Target und iFrame

Im wesentlichen besteht der Trick aus einer Umleitung des Formulars in einen iframe. Dazu wird das target Attribut verwendet. Der iframe sieht folgendermaßen aus:

<iframe name="fupframe" class="hidden"></iframe>
		

Folgendes CSS blendet den iframe aus:

<style type="text/css">
.hidden {
display: none;
width: 0px;
height: 0px;
}
</style>
		

Indikatoren vorbereiten

Da die Seite nicht neu geladen wird, muss der Benutzer auf andere Art und Weise darüber informiert werden, dass ein Upload stattfindet bzw. abgeschlossen ist. Dazu dienen folgende Indokatoren:

<p>
  <span id="indicator-done">Upload erfolgreich</span>
  <span id="indicator-loading">Datei wird hochgeladen</span>
</p>
		

Natürlich sollten diese Indokatoren noch nicht sichtbar sein, deswegen werden sie mit folgendem CSS ausgebelendet.

<style type="text/css">
#indicator-done, #indicator-loading {
display: none;
-moz-border-radius: 4px;
padding: 5px;
}

#indicator-done {
background-color: green;
}

#indicator-loading {
background-color: yellow;
}
</style>
		

Javascript

Das Javascript dient dem Aktualisieren der Indikatoren bei einer Statusänderung.

Das 1. Skript wird aufgerufen, wenn das Formular abgeschickt wird - mit dem onsubmit Attribut.

<script type="text/javascript">
<!--
function uploadStart()
{
	document.getElementById("indicator-done").style.display = "none";
	document.getElementById("indicator-loading").style.display = "inline";
}
//-->
</script>
		

Es versteckt den indocator-done Indikator und zeigt den indocator-loading Indikator an.

Die nächste Funktion wird vom Backend aufgerufen, wenn der Upload abgeschlossen ist und erfolgreich war:

<script type="text/javascript">
<!--
function uploadDone()
{
	document.getElementById("indicator-loading").style.display = "none";
	document.getElementById("indicator-done").style.display = "inline";
}
//-->
</script>
		

Backend

Datei speichern

Das Backend sollte die Datei zunächst einmal prüfen und speichern. Eine Anleitung dafür findet sich in diesem Tutorial nicht.

Interface benachrichtigen

Wenn die Datei gespeichert ist, muss der Benutzer darüber benachrichtigt werden. Die Funktion uploadDone() übernimmt diese Aufgabe und muss nur noch aufgerufen werden:

<script type="text/javascript">
<!--
window.parent.uploadDone();
//-->
</script>
		

Beispiel

Zum Abschluss noch ein Beispiel für ein Interface und ein Backend.

Dieser Inhalt ist unter einer Creative Commons-Lizenz lizenziert.
Geschrieben von Christian Sagmüller <christian@sagmueller.net>