Bildvorschau im upload Formular mit Js.

bensky

bensky

Erfahrenes Mitglied
Hallo Leute,
habe nach langem suchen endlich ein Javascript gefunden, das mir nach klicken des durchsuchen Buttons ein kleines thumbnail anzeigt.

Ich habe jetzt nur das problem das ich seit 4 stunden versuche diese funktion halt für 4 upload felder umzuschreiben. Es gilingt mir aber einfach nicht :confused: .

Klar, wenn ich das javascript 4 mal komplett aufrufe nur mit anderen Namen dann würde das klappen, aber das ist ja nicht die feine Art. Ich poste das script vielleicht kann einer von euch Javaexperten mir mal ne lösung schreiben oder einfach das script umändern. das dürfte für euch ja kein Ding sein ;) Vielen Dank im voraus....

Code: 
<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>
 
Zuletzt bearbeitet:
Auf die Gefahr hin, dass ich zwei Mal den selben Menschen belehre:Sinn dieses Forums ist es nicht dir deine Scripts zu schreiben bzw. umzuschreiben, sondern dir zu helfen es selbst zu tun.

Wo genau hast du denn Probleme? Rein Prizipiell musst du für jedes Uploadfeld ein Bild mit der id="Vorschaufoto1", id="Vorschaufoto2", usw. machen und dann im onChange neben der Quelle auch noch die richtige id angeben.
 
Du schon wieder ;)

Is klar, mein problem liegt einfach nur darin, den oberen teil den input feldern anzupassen.
In php würd ich das mit nem Array machen, in JS hab ich keine Ahnung wie ich den teil
Code: 
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;

so anpassen kann, das ich beliebig viele input felder einfügen kann.... :confused:
 
Hallo,
ich kann zwar eigentlich gar kein JavaScript, aber das hab so gar ich hinbekommen. :rolleyes:

HTML: 
<html>
<head>
<script language="JavaScript">
<!--
function FotoAnzeigen(Quelle, i)
{
	if(document.getElementById("Vorschaufoto"+i))
	{
		var Quellfoto = document.getElementById("Vorschaufoto"+i);
		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"+i).value = "";
				document.getElementById("Vorschaufoto"+i).src = "vorschau-beim-upload-von-bilddateien-2.gif";
				return false;
			}
			else
			{
				document.getElementById("Vorschaufoto"+i).src = Quelle;
				return true;
			}
		}
		else
		{
			return;
		}
	}
	else
	{
		return;
	}
}
//-->
</script>
<title>Vorschau beim Upload von Bilddateien</title>
</head>
<body>
<form>
Foto1:  <input id="Quellfoto1" name="Foto1" onChange="FotoAnzeigen(this.value, 1);" type="file"><br><br>
Vorschau1:<br>
<img height="100" id="Vorschaufoto1" src="vorschau-beim-upload-von-bilddateien-2.gif" width="100"><br>
&nbsp;<hr>
<p>Foto2:  <input id="Quellfoto2" name="Foto2" onChange="FotoAnzeigen(this.value, 2);" type="file"><br><br>
Vorschau2:<br>
<img height="100" id="Vorschaufoto2" src="vorschau-beim-upload-von-bilddateien-2.gif" width="100"></p>
<hr>
<p>Foto3:  <input id="Quellfoto3" name="Foto3" onChange="FotoAnzeigen(this.value, 3);" type="file"><br><br>
Vorschau3:<br>
<img height="100" id="Vorschaufoto3" src="vorschau-beim-upload-von-bilddateien-2.gif" width="100"></p>
<hr>
<p>Foto4:  <input id="Quellfoto4" name="Foto4" onChange="FotoAnzeigen(this.value, 4);" type="file"><br><br>
Vorschau4:<br>
<img height="100" id="Vorschaufoto4" src="vorschau-beim-upload-von-bilddateien-2.gif" width="100"><br><br>
<br><br><br><input type="submit" value="Fotos hochladen">
</p>
</form>
</body>
</html>

mfg
forsterm
 
Hallo,

ich habe das Script so übernommen, es auch ganz gut, nur hab ich ein kleines Problem damit. In einem Formular Speichere ich meine Daten ab und in einem anderen Formular kann ich die Daten ändern. Nun zu meinem Problem. In dem Formular wo ich die Daten ändere hol ich sie mir mit dem Befehl Value="<?php print"$dateiname";?>" wieder zurück, das ich sehe was eingegeben wurde. Bei dem Inputfeld für das Bild, so wie es in dem Script dargestellt ist, funz es aber nicht.
Wie kann ich es machen, das der zuvor abgespeicherte Name angezeigt wird Sonst muß ich jedes mal wenn ich was ändere das Bild auch wieder neu öffnen und auswählen.

Gruß
Alexander
 
Hallo,

das wußte ich nicht. Kann man das Problem nicht irgend wie anders lösen? Denn jedes mal den Bildnamen neu eingeben ist ja auch nicht sinnvoll und wissen müßte man ihn ja auch.

Gruß
Alexander
 
Naja..schreibe den Bildnamen bspw. als normalen Text hin und dazu das leere Uploadfeld.

Abgesehen davon, dass es wie bereits erwähnt, nicht geht, wäre es ja auch nicht besonders clever, das Bild jedesmal aufs neu hochzuladen, wo es ich doch schon auf dem Server befindet.

Wählt jemand ein anderes Bild, löschst du halt das alte und packst dafür das neu dorthin(wohin auch immer :-) )
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück