nicht angemeldet
Bild FileUpload
Hallo,
bin noch relativ unerfahren mit Java Script und suche eine Möglichkeit, eine Grafik im HTML Dokument auszugeben, die der User von seiner Festplatte auswählt.
Ich habe dazu eine Bild Variable mit dem Wert "" definiert und ein FileUpload eingebaut. Bei onChange des FileUploads wird die Bild Variable = dem File Value, also dem Pfad der Grafik, gesetzt.
Jedoch ändert sich die globale Varable des Bildes nicht. Die HTML Seite wird nach dem Aussuchen der Datei von der Festplatte einfach wieder zurück gesetzt ohne das die neue Grafik ausgegeben wird.
-
Hm...
Also ob das funktioniert, weiß ich nicht.
Wenn überhaupt, muß das Bild eine id haben:
<img src="" id="wechselbild">
Dann im Script sagen:
wo="c:\bild.jpg"; (o.ä.)
wechselbild.src=wo;Dann müßte es laufen. Schöner wirds allerdings, wenn man das ganze
in PHP realisiert und die Bilder zum Server hochlädt.
Aber davon später...-
Hm...
Also ob das funktioniert, weiß ich nicht.
Wenn überhaupt, muß das Bild eine id haben:
<img src="" id="wechselbild">
Dann im Script sagen:
wo="c:\bild.jpg"; (o.ä.)
wechselbild.src=wo;Das funktioniert nicht, da "window.wechselbild" nicht existiert (Ich weiss das es im IE funktioniert, allerdings ist die übertriebene Fehlertoleranz dieses Browsers nicht hilfreich um andere Fehler zu vermeiden)
Richtig ist:
"document.wechselbild"
das klappt noch besser (soll heißen, auch in alten Browsern) wenn das Bild einen Namen hat:
<img src="" name="wechselbild">Allerdings passt sich dann die Größe in vielen Browsern nicht an, d.h. es wird nichts angezeigt. Insofern ist dies nur eine kaputte Lösung.
Dann müßte es laufen. Schöner wirds allerdings, wenn man das ganze
in PHP realisiert und die Bilder zum Server hochlädt.Kommt drauf an. vielleicht möchte er eine Art Vorschau einbauen.
Struppi.
-
Im Prinzip geht es darum das der Benutzer irgent ein Bild von seiner Festplatte in IE begutachten kann. Es soll also keine vorgegebenes Bild sein.
@Struppi: Das Bild soll sich ändern sobald man eine Datei in einem FileUpload Feld ausgesucht hat und zwar genau in die ausgesuchte Bilddatei. Man könnte es auch mit onClick machen aber onChange finde ich interessanter.- könnte sein das ein Fehler drinn ist oder ich etwas ganz falsch mache. Weiß ich eben nicht genau. Problem ist, dass es bei dem Script um ein Bild Drag & Drop System geht und der Quelltext ist entsprechend umfangreich. Werde aber mal versuchen die entsprechenden Passagen dazustellen:
//Ersteinaml die globalen Bildvariablen die wichtig sind
var bild1 = "";
var bild2 = "";
var bild3 = "";
var bild4 = "";//Habe dann im Body ein FileUpload Feld
<form name="form1" >
<input type="file" name="Datei" value="" onChange=bild()>
</form>//Und wieder im Head eine Funktion die die globale Variable bild1 in die Eingabe im Upload Form verändern soll
function bilder()
{
bild1 = document.form.Datei.value
}
//Ich habe einmal zur kontrolle ein alert eingefügt, dass mir angezeigt hat, dass sich die Variable korrekt geändert hat, sobald ich das alert Feld jedoch wegdrücke,wird die ganze Seite wieder resetet oder von vorne geladen.-
Werde aber mal versuchen die entsprechenden Passagen dazustellen:
//Ersteinaml die globalen Bildvariablen die wichtig sind
var bild1 = "";
var bild2 = "";
var bild3 = "";
var bild4 = "";du kennst Arrays?
//Habe dann im Body ein FileUpload Feld
<form name="form1" >
<input type="file" name="Datei" value="" onChange=bild()>
</form>//Und wieder im Head eine Funktion die die globale Variable bild1 in die Eingabe im Upload Form verändern soll
function bilder()
{
bild1 = document.form.Datei.value
}
//Ich habe einmal zur kontrolle ein alert eingefügt, dass mir angezeigt hat, dass sich die Variable korrekt geändert hat, sobald ich das alert Feld jedoch wegdrücke,wird die ganze Seite wieder resetet oder von vorne geladen.Seltsam.
Bei mir funktoniert folgender Code tadelos;<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script>
function bild(nr, src)
{
alert(nr + src);
var b = document.images['bild' + nr];
if(!b) return alert('Bild ' + nr + ' existiert nicht!');b.src = src;
}
</script>
</head><body>
Bild 1: <img src="about:blank" name="bild1"><br>
Bild 2: <img src="about:blank" name="bild2"><br><form name="testform" action="irgendwas" method="post">
Ändere Bild 1: <input type="file" onchange="bild(1, this.value);"><br>
Ändere Bild 2: <input type="file" onchange="bild(2, this.value);"><br>
</form>
</body>
</html>Struppi.
-
-
Hallo,
bin noch relativ unerfahren mit Java Script und suche eine Möglichkeit, eine Grafik im HTML Dokument auszugeben, die der User von seiner Festplatte auswählt.
Ich habe dazu eine Bild Variable mit dem Wert "" definiert und ein FileUpload eingebaut. Bei onChange des FileUploads wird die Bild Variable = dem File Value, also dem Pfad der Grafik, gesetzt.
Jedoch ändert sich die globale Varable des Bildes nicht. Die HTML Seite wird nach dem Aussuchen der Datei von der Festplatte einfach wieder zurück gesetzt ohne das die neue Grafik ausgegeben wird.Warum sollte sich ein Bild ändern, wenn in einem Formular ein Feld ausfüllst?
Oder kann es sein, das du eine Javascript geschrieben hast und es Fehler enthält und du nun gerne Wissen möchtest wie man es richitg macht? Dazu wäre es sehr hilfreich wenn du einige Zeilen deines Codes einmal vorstellst.
Struppi.