input type="file" Bild wählen und anzeigen

[chichi]

Hallo,
kann ich bei nach dem wählen einer datei (hier ein jpg) insfile-input-feld diese auch direkt nach der Wahl anzeigen lassen?
<input type="file" name="PIC">

ich habe dafür ein spacer-bild angelegt, das durch das gewählte ersetzt werden soll:
<img id="uploadbild" src="spacer.gif" width="50" height="36">

die änderung mit javascript würde ich so angehen:
document.upload.uploadbild.src = imageNAME;//bild anzeigen

Kann ich also den pfad aus dem file-input auslesen und per javascript dem vorgesehenen bild übergeben?

Grund warum ich das so haben will: man sieht das bild , das hochgeladen wwerden soll als kleine vorschau neben dem input-feld.

chichi

[chichi]

so hats im IE 6 geklappt:
<input type="file" name="PIC" onchange="document.images[0].src=this.value">

offene frage: was genau bedeutet document.images[0] und kann ich das auch noch für andere browser gängig bekommen?

chichi

[Cybaer]

Hi,

offene frage: was genau bedeutet document.images[0]

Dem Dokument sein erstes Bild. ;-)

und kann ich das auch noch für andere browser gängig bekommen?

Was meldet denn der andere Browser für einen Fehler?

Gruß, Cybaer

[chichi]

kann ich denn den value-Inhalt von <input type="file" id="bild1"> mit javascript ändern (z.B. leeren?)

habe es so versucht: onchange="document.getElementById('bild1').value='';"

klappt mit text-inputs gut. mit file-inputs nicht? oder hab ich was flasch gemacht?

fehler bei file-input: da tut sich nichts : das feld bleibt mit dem wert wie es ist. ich will es aber leeren (ohne refresh!)

chichi

[Cybaer]

Hi,

kann ich denn den value-Inhalt von <input type="file" id="bild1"> mit javascript ändern (z.B. leeren?)

Nein. (Sicherheitsgründe)

Gruß, Cybaer

[murkser]

so hats im IE 6 geklappt:
<input type="file" name="PIC" onchange="document.images[0].src=this.value">

offene frage: was genau bedeutet document.images[0] und kann ich das auch noch für andere browser gängig bekommen?

document.images[0] bedeutet, das du auf das erste Element in einem Array mit allen Bildern des documents zugreifst. Wenn du also vor dein Bild noch ein anderes Bild ausgibstr, bekommst du Probleme...

Gib noch ne ID dazu, dann kannst du schreiben:
<input type="file" id="PIC" name="PIC" onchange="document.getElementById('PIC').src=this.value">

Das ist eindeutiger und läuft in allen aktuellen Browsern.

grüsse, murkser

[Cybaer]

Hi,

<input type="file" id="PIC" name="PIC" onchange="document.getElementById('PIC').src=this.value">

? Da ist wohl einges durcheinander geraten. PIC sollte das Bild sein und nicht INPUT - das man sowieso nicht ändern kann.

Das ist eindeutiger und läuft in allen aktuellen Browsern.

Ist korrekt und läuft in allen Browsern:

<img name="PIC" src="leer.gif">
<input type="file" onchange="document.images['PIC'].src=this.value;">

(auf das übliche if(document.images) kann in diesem Fall verzichtet werden - ein if(document.getElementById) müßte bei DOM-2-Zugriff aber rein)

Gruß, Cybaer

[Cybaer]

Nachtrag:

(auf das übliche if(document.images) kann in diesem Fall verzichtet werden - ein if(document.getElementById) müßte bei DOM-2-Zugriff aber rein)

Hmm, oder geht onChange im INPUT auch bei JS 1.0? Dann darf es natürlich doch ein if(document.images) sein. ;-)

Gruß, Cybaer

[Struppi]

Ist korrekt und läuft in allen Browsern:

Nicht mehr.

Sowohl im Firefox (1.0.3) als auch in meinem MZ (1.7.5) wird das Bild nicht ausgetauscht. Bzw. einfach nicht angezeigt. Unter Eigenschaften wird zwar die neue Quelle angeben aber das Bild läßt sich nicht anschauen und wird nicht angezeigt.

Es geht nur, wenn man nicht mit dem "Durchsuchen..." Button das Bild auswählt und den Dateinamen von Hand eingibt.

Struppi.

[Cybaer]

Hi,

Nicht mehr.

Doch doch, allerdings sollte man noch das File-Protokoll vorhängen (und man sollte noch auf, mangels echter Erkennugnsmöglichkeit, auf die Dateiendung prüfen, und, und, und ... ;-)). Also

document.images['PIC'].src='file:///'+this.value

Sowohl im Firefox (1.0.3) als auch in meinem MZ (1.7.5) wird das Bild nicht ausgetauscht. Bzw. einfach nicht angezeigt. Unter Eigenschaften wird zwar die neue Quelle angeben aber das Bild läßt sich nicht anschauen und wird nicht angezeigt.

Nein, daß ist etwas anderes und hat nichts mit dem Script zu tun: Verschärfte Same-Origin-Policy.

Manche Browser (z.B. Mozilla - auch ältere, Opera, aber natürlich auch IE, sofern es der Admin möchte ;-)) erlauben prinzipiell keine Einbindung (mehr) von lokalen Seiten, wenn die Seite selbst nicht ebenfalls lokal ist. Ist sie das, funktioniert es auch mit Mozilla 1.0.3. Ist sie es nicht, hängt es vom Browser (bzw. von den Sicherheitseinstellungen) ab, was er macht, bzw. wie er es darstellt (Mozilla macht nichts, Opera stellt einen "Bild"-Hinweis dar, über den man manuell Zugriff auf das Bild hat, z.B. um es doch noch darzustellen). Das Scripting ist davon aber nicht betroffen - es wird kein Fehler generiert. Mozilla verzichtet sogar auf den sonst üblichen Hinweis (in der JS-Konsole), daß es die Darstellung von lokalen Dateien aus Sicherheitsgründen soeben verhindert hat.

Es geht nur, wenn man nicht mit dem "Durchsuchen..." Button das Bild auswählt und den Dateinamen von Hand eingibt.

Das wäre, so die Seite auf einem Server liegt, ein Fall für den Bugreport. Wenn nicht, so sollte es spätestens mit dem Vorschalten des File-Protokols auch beim Dialog klappen.

Gruß, Cybaer

[Struppi]

Nicht mehr.

Doch doch, allerdings sollte man noch das File-Protokoll vorhängen (und man sollte noch auf, mangels echter Erkennugnsmöglichkeit, auf die Dateiendung prüfen, und, und, und ... ;-)). Also

document.images['PIC'].src='file:///'+this.value

Das ist es was gefehlt hat.

Sowohl im Firefox (1.0.3) als auch in meinem MZ (1.7.5) wird das Bild nicht ausgetauscht. Bzw. einfach nicht angezeigt. Unter Eigenschaften wird zwar die neue Quelle angeben aber das Bild läßt sich nicht anschauen und wird nicht angezeigt.

Nein, daß ist etwas anderes und hat nichts mit dem Script zu tun: Verschärfte Same-Origin-Policy.

sowas hatte ich mir schon gedacht, hatte aber gestern keine Zeit zum suchen.

Manche Browser (z.B. Mozilla - auch ältere, Opera, aber natürlich auch IE, sofern es der Admin möchte ;-)) erlauben prinzipiell keine Einbindung (mehr) von lokalen Seiten, wenn die Seite selbst nicht ebenfalls lokal ist. Ist sie das, funktioniert es auch mit Mozilla 1.0.3. Ist sie es nicht, hängt es vom Browser (bzw. von den Sicherheitseinstellungen) ab, was er macht, bzw. wie er es darstellt (Mozilla macht nichts, Opera stellt einen "Bild"-Hinweis dar, über den man manuell Zugriff auf das Bild hat, z.B. um es doch noch darzustellen). Das Scripting ist davon aber nicht betroffen - es wird kein Fehler generiert. Mozilla verzichtet sogar auf den sonst üblichen Hinweis (in der JS-Konsole), daß es die Darstellung von lokalen Dateien aus Sicherheitsgründen soeben verhindert hat.

Darüber hatte ich mich auch gewundert, weil ich dachte mich erinnern zu können das es in anderen Versionen einen Warnhinweis gab.

Es geht nur, wenn man nicht mit dem "Durchsuchen..." Button das Bild auswählt und den Dateinamen von Hand eingibt.

Das wäre, so die Seite auf einem Server liegt, ein Fall für den Bugreport. Wenn nicht, so sollte es spätestens mit dem Vorschalten des File-Protokols auch beim Dialog klappen.

Tut es. Super!

Struppi.

[chichi]

danke für die hilfe. ich konnte mein ziel damit erreichen.
chichi

[Struppi]

danke für die hilfe. ich konnte mein ziel damit erreichen.

Bei dir funktionert das im FF und MZ?
seltsam, warum bei mit nicht?

Struppi.

[Struppi]

danke für die hilfe. ich konnte mein ziel damit erreichen.

Bei dir funktionert das im FF und MZ?
seltsam, warum bei mit nicht?

also hier mal ein Beispiel:
http://javascript.jstruebig.de/exp/faq/upload.html

Funktioniert bei mir nur im IE, auch Opera weigert sich das Bild zu laden.

Struppi.