Wieder einmal stehe ich vor dem Problem, auf einer Webseite ein Uploadfeld für Bilder zu integrieren. Eigentlich kein Problem, nur kann man für das Dialogfeld nicht festlegen, welche Dateitypen erlaubt sind. Um wenigstens schon vor dem Senden des Formulars den Inhalt zu prüfen, habe ich ein kleines JavaScript geschrieben.

Erläuterung

Es sollen nur Bilder im Format *.jpg, *.gif, *.png erlaubt werden. Zuerst prüfe ich, ob überhaupt etwas ausgewählt wurde, wenn nicht, gibts den ersten Alert.

Als nächstes zerlege ich mit split() den String in Teile, wobei der Punkt als Trenner angegeben wird. Das Ergebnis ist ein Array.
Um sicher zu sein, dass nicht irgendwo im Pfad noch ein Punkt vorkommt, frage ich die Anzahl Sätze im Array ab. Hier beginnt JavaScript aber mit 1 zu zählen. Wenn ich jedoch auf das Array zugreife, ist das erste Array [0]. Deshalb wähle ich das richtige Array aus, indem ich von der Anzahl eines abziehe.

Nun kann ich endlich prüfen und gebe wieder eine Alertbox aus, falls es sich nicht um eines der drei Dateiformate handelt. Die if-Schleife ist ok bei drei Argumenten. Sollten es mehr sein, kann man ebenfalls ein Array anlegen und dann die Dateiendungen in einer Schleife prüfen lassen.

Wer möchte, kann das Script gerne nutzen. Im Formular – am besten innerhalb des Submit-Buttons – muss dann noch das Script aufgerufen werden, ein Beispiel ist dabei.

<script type="text/javascript">
//<![CDATA[
<!--
function validateForm() {
var d=document.bilder;
var error="";
if (d.img1.value == 0) { alert ("Bitte wählen Sie ein Bild aus!"); return false; }
var Bildname = d.img1.value;
var Bildarray = Bildname.split(".");
var Anzahl = Bildarray.length;
var Endung = Bildarray[Anzahl-1];
if (Endung != "jpg" && Endung != "gif" && Endung != "png") { alert ("Die Datei hat leider keines der erlaubten Formate!"); return false; }

return true;
}
 // -->
 //]]>
</script>

// Beispiel für den Submit-Button:
<input type="submit" name="submit" value="Datei jetzt hochladen!"
 onclick="this.value='Bitte auf Bestätigung warten!'; return validateForm();" />

Trotz allem sollte dann bei der Weiterverarbeitung, zum Beispiel mit PHP, nochmals eine Prüfung vorgenommen werden, da einige Anwender JavaScript ausschalten.