Vorschau beim Upload von Bilddateien
Dieses Javascript bietet bereits vor dem Upload einer Bilddatei die Möglichkeit, diese in einer Vorschau zu betrachten und erst dann hochzuladen.
Ein entscheidender Vorteil ist die Einsparung unnötigen Traffics, da der Besucher bereits vor dem Hochladen sieht, welches Bild er ausgewählt hat. Dabei entsteht bei Ihnen als Betreiber der Webseite keinerlei Traffic, das Vorschaubild wird lokal unter dem Formular eingebunden.
<html>
<head>
<script language="JavaScript">
<!--
function FotoAnzeigen(Quelle)
{
if(document.getElementById("Vorschaufoto"))
{
var Quellfoto = document.getElementById("Vorschaufoto");
if(Quelle)
{
Dateiendung = Quelle.substring(Quelle.lastIndexOf(".")+1);
if(Dateiendung.toLowerCase() != "jpg" && Dateiendung.toLowerCase() != "jpeg" && Dateiendung.toLowerCase() != "gif" && Dateiendung.toLowerCase() != "png")
{
var Fehlermeldung = "Bitte wählen Sie eine Bilddatei aus.";
alert(Fehlermeldung);
document.getElementById("Vorschaufoto").value = "";
document.getElementById("Vorschaufoto").src = "vorschau-beim-upload-von-bilddateien-2.gif";
return false;
}
else
{
document.getElementById("Vorschaufoto").src = Quelle;
return true;
}
}
else
{
return;
}
}
else
{
return;
}
}
//-->
</script>
<title>Vorschau beim Upload von Bilddateien</title>
</head>
<body>
<form>
Ihr Foto: <input id="Quellfoto" name="Foto" onChange="FotoAnzeigen(this.value);" type="file"><br>
<input type="submit" value="Foto hochladen">
</form>
Vorschau:<br>
<img height="100" id="Vorschaufoto" src="vorschau-beim-upload-von-bilddateien-2.gif" width="100">
</body>
</html>
Sobald eine gültige Bilddatei (JPG-, GIF- oder PNG-Datei) vom Besucher gewählt wurde, erscheint das Vorschaubild. Wurde kein Bild oder eine ungültige Datei ausgewählt, wird nur ein transparentes GIF-Bild (“blank.gif”) angezeigt, welches Sie hier herunterladen können.
Kategorie: Javascript
