# Bildvorschau im upload Formular mit Js.



## bensky (12. Januar 2006)

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   .

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....


```
<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>
```


----------



## con-f-use (12. Januar 2006)

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.


----------



## bensky (12. Januar 2006)

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 
	
	
	



```
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....


----------



## forsterm (12. Januar 2006)

Hallo,
ich kann zwar eigentlich gar kein JavaScript, aber das hab so gar ich hinbekommen.  


```
<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


----------



## bensky (12. Januar 2006)

genial, sowas hab ich gesucht. schönen dank.


----------



## forsterm (12. Januar 2006)

bensky hat gesagt.:
			
		

> genial, sowas hab ich gesucht. schönen dank.


 
Bitte das Thema als "erledigt" markieren.

mfg
forsterm


----------



## Schwammerl (23. April 2006)

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


----------



## fanste (23. April 2006)

Man kann den Dateiuploadfeldern kein value zuweisen.


----------



## Schwammerl (23. April 2006)

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


----------



## Sven Mintel (24. April 2006)

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  )


----------



## Gumbo (24. April 2006)

Bei mir (Safari 2.0.3) funktioniert das Beispiel nicht. Deshalb schlage ich den Weg über das „file“-Schema vor:
	
	
	



```
function FotoAnzeigen( Quelle, i )
{
	if( document.getElementById("Vorschaufoto"+i) ) {
		var newURL = "file:///" + Quelle.replace("\\", "/");
		return document.getElementById("Vorschaufoto"+i).src = newURL.replace("////", "///");
	}
	return false;
}
```


----------

