Bildvorschau im upload Formular mit Js. @ tutorials.de: Tutorials, Forum & Hilfe

bensky · 12.01.06 13:44

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

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>

***con-f-use*** · 12.01.06 13:49

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.01.06 13:58

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

forsterm · 12.01.06 15:20

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

HTML-Code:

<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.01.06 15:27

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

forsterm · 12.01.06 16:17

Zitat von bensky

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

Bitte das Thema als "erledigt" markieren.

mfg
forsterm

Schwammerl · 23.04.06 13:04

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, **** 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.04.06 13:27

Man kann den Dateiuploadfeldern kein value zuweisen.

Schwammerl · 23.04.06 20:58

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.04.06 02:58

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.04.06 09:01

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

Code :

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

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Upload-Formular

Formular mit Upload

upload via formular

Upload mit Bildvorschau

E-Mail:

Abonnieren Abbestellen