FireFox: innerHTML gehorcht nicht

[*Alex*]

Hallo Ihr

Ich möchte eine Grafik vor dem Hochladen über ein
<input type="file" name="bild">
in einer JavaScript-generierten Vorschau anzeigen lassen.

Dazu hole ich mir den Pfad
pfad = document.getElementsByName('bild')[0].value;
und gebe mit
document.getElementById('Bildvorschau').innerHTML="<IMG SRC=""+pfad+"" id="Bild" style=""+style+"">";
das Bild in der Vorschau
<span id="Bildvorschau">&nbsp;</span>
aus.

Funktioniert prima mit IE.
FireFox kommt bis zum Zusammenstellen des Imagetags mit, aber er schreibt ihn nicht in die Vorschau.

Warum nicht?

Wißt Ihr Rat?

Vielen Dank
   *Alex*

[JürgenB]

Hallo *Alex*,

was lässt dich glauben, das Bilder einen Wert und keine Quelle haben?

Kopiere mal von dieser Seite aus folgendes in die Adresszeile deines Browsers und drücke dann enter:

javascript:alert(document.images[0].value)

und

javascript:alert(document.images[0].src)

Mehr zu Bildern und Javascript findest du hier: http://de.selfhtml.org/javascript/objekte/images.htm

Gruß, Jürgen

[Der Martin]

Hallo Jürgen,

was lässt dich glauben, das Bilder einen Wert und keine Quelle haben?

du hast nicht aufgepasst. ;-)

Alex hatte im OP folgende Schnipsel:

[HTML:] <input type="file" name="bild">
[JS:]   pfad = document.getElementsByName('bild')[0].value;

Er liest also das value-Attribut aus dem Dateiupload-Feld. Ich habe beim Lesen zwar schon gestutzt, weil ich meinte mich zu erinnern, dass ein Zugriff auf dieses Formularelement aus Sicherheitsgründen nicht erlaubt sei. Aber da er auch schrieb:

Funktioniert prima mit IE.
FireFox kommt bis zum Zusammenstellen des Imagetags mit, ...

gehe ich davon aus, dass er sich davon überzeugt hat, in 'pfad' die gewünschte Information zu bekommen (ist Lesezugriff vielleicht doch erlaubt?).

Und dann war ich auch ratlos und hab mich erstmal zurückgehalten.

So long,
 Martin

[JürgenB]

Hallo Der Martin,

du hast nicht aufgepasst. ;-)

stimmt. Leider weiß ich dann auch nicht weiter. Vieleicht sollte Alex sich den Pfad mal mit alert ausgeben lassen oder sich im FF über "Auswahl-Quelltext anzeigen" ansehen, wie das img-Tag aussieht.

Gruß, Jürgen

[*Alex*]

Hallo Ihr

Es liegt nicht am Upload-Feld
Wenn ich möchte, gibt FireFox mir den Pfad brav als String aus und schreibt ihn mit innerHTML auch artig ins Dokument.

Ich glaube es liegt an der absoluten lokalen Adressierung:
Bild:<IMG SRC="C:\Ordner\bild.jpg">     bzw
Bild:<IMG SRC="C:/Ordner/bild.jpg">
führt im IE zur Anzeige des Bildes
bei FireFox, Netscape, Opera, Mozzilla aber nicht.
Da wird nur das Wort "Bild" ausgegeben.

Oder es liegt schlicht daran, dass die Datei eben auf dem User-Rechner liegt und ein solcher Pfad für alle außer MS ungültig ist...

Hat denn von Euch schonmal jemand eine Vorschau in der Art realisiert?

Ich danke Euch

*Alex*

[Der Martin]

Hallo Alex,

Ich glaube es liegt an der absoluten lokalen Adressierung:
Bild:<IMG SRC="C:\Ordner\bild.jpg">     bzw
Bild:<IMG SRC="C:/Ordner/bild.jpg">
führt im IE zur Anzeige des Bildes
bei FireFox, Netscape, Opera, Mozzilla aber nicht.

das ist ja auch völlig korrekt. In irgendeinem Posting hab ich sowas ähnliches heute schon einmal gelesen: Moz/Firefox und anscheinend auch Opera interpretieren bei so einer Pfadangabe das C: vornedran als Protokoll (wie http:) und stellen dann fest, dass das Protokoll C: auf der Maschine nicht implementiert ist.

Da wird nur das Wort "Bild" ausgegeben.

Wenigstens ein schwacher Trost, und wahrscheinlich das beste, was ein standardkonformer Browser damit machen kann. Um die zufriedenzustellen, könntest du natürlich einfach das Pseudoprotokoll file:// voranstellen. Der IE braucht es zwar nicht, nimmt es aber auch nicht übel. :-)

Schönen Abend noch,
 Martin

[*Alex*]

Hallo Martin

könntest du natürlich einfach das Pseudoprotokoll file:// voranstellen.

<IMG SRC="file://C:\Ordner\bild.jpg">
<IMG SRC="file://C:/Ordner/bild.jpg">
<IMG SRC="file://Ordner/bild.jpg">

nichts funktioniert. Habe keine Ahnung von Pseudoprotokollen und stochere im Dunkeln...

Wie sieht die Syntax aus?

auch schönen Abend
     *Alex*

[Der Martin]

Hi Alex,

könntest du natürlich einfach das Pseudoprotokoll file:// voranstellen.

<IMG SRC="file://C:\Ordner\bild.jpg">
<IMG SRC="file://C:/Ordner/bild.jpg">
<IMG SRC="file://Ordner/bild.jpg">

nichts funktioniert. Habe keine Ahnung von Pseudoprotokollen und stochere im Dunkeln...

seltsam. Die richtige Form, nämlich die zweite, akzeptieren bei mir sowohl Firefox als auch IE klaglos (Opera hab ich gerade nicht zur Hand). Probier mal, diese Pseudo-URL direkt in der Adresszeile deines/r Browser/s einzugeben. Dann müssten sie das Bild anzeigen. Ich vermute eher, dass du noch ein Problem mit dem innerHTML hast.
Warum setzt du da nicht ein img-Element fest rein, gibst ihm zunächst ein Platzhalter-GIF und eine ID und änderst sein src nachher über document.getElementById(...).src=... ?

So long,
 Martin

[*Alex*]

Hallo Martin

seltsam. Die richtige Form, nämlich die zweite, akzeptieren bei mir sowohl Firefox als auch IE klaglos (Opera hab ich gerade nicht zur Hand).

Jetzt wirds echt merkwürdig.
<HTML><HEAD></HEAD><BODY>
Bild:<IMG SRC="file://C:/Ordner/bild.jpg">
</BODY></HTML>
führt in FireFox 1.5.0.1 bei mir zu einem Platzhalter.

Probier mal, diese Pseudo-URL direkt in der Adresszeile deines/r Browser/s einzugeben. Dann müssten sie das Bild anzeigen.

Das kann auch FireFox, aber ich brauch das Bild ja im Dokument.

Ich vermute eher, dass du noch ein Problem mit dem innerHTML hast.
Warum setzt du da nicht ein img-Element fest rein, gibst ihm zunächst ein Platzhalter-GIF und eine ID und änderst sein src nachher über document.getElementById(...).src=... ?

Hat nix damit zu tun (siehe Quelltext oben).

Was genau macht der Browser mit den Eingaben in der Adresszeile anders?
z.B. werden ja auch Leerzeichen in "%" umgewandelt und hinter file:// steht plötzlich noch ein slash
file:///C:/Dokumente%und%Einstellungen/...
?

Vielleicht liegt hier der Hund begraben?

Allerdings, wenn ich das alles von Hand im Dokument mache
<HTML><HEAD></HEAD><BODY>
Bild:<IMG SRC="file:///C:/Dokumente%und%Einstellungen/Ordner/bild.jpg">
</BODY></HTML>
bekomme ich im FireFox trotzdem das Bild nicht angezeigt...

Liebe Grüße

*Alex*

[Jonathan]

Also, erstmal müssen nach file:/// drei Slashes und zweitens werden Leerzeichen nicht mit % sondern mit %20 maskiert.

[Vinzenz Mai]

Hallo Jonathan,

Also, erstmal müssen nach file:/// drei Slashes und zweitens werden Leerzeichen nicht mit % sondern mit %20 maskiert.

alternativ: file://localhost/
Da localhost optional ist, verkürzt man das halt auf file:/// :-)

Firefox (1.5.x) läßt sich jedoch erst dann dazu bewegen, lokale Inhalte darzustellen, wenn man die entsprechenden Maßnahmen vorgenommen hat, wie sie auf der von Dir verlinkten Seite beschrieben sind.

Freundliche Grüße

Vinzenz

[Candid Dauth]

Heißa, Der, ;-)

Um die zufriedenzustellen, könntest du natürlich einfach das Pseudoprotokoll file:// voranstellen.

Dann funktioniert das aber nicht mehr, wenn ich eine http- oder ähnliche Adresse eingebe. (KDE kann Dateien zwischen beliebigen unterstützten Protokollen hin- und herkopieren.)

Gautera!
Grüße aus Biberach Riss,
Candid Dauth

[Schorsch]

Salut

Ich möchte eine Grafik vor dem Hochladen über ein
<input type="file" name="bild">
in einer JavaScript-generierten Vorschau anzeigen lassen.

Moment, das dürfte eigentlich nicht gehen.
Stell dir vor, so könnte ich ja einfach eine Webseite bauen und ein Bildtag wie:

<img src="C:/windows/irgendwas.jpg" />

reinschreiben. Und schon siehst du auf der Webseite eine deiner Dateien. Wenn es möglich ist, Bilder darzustellen müsste es auch möglich sein, auf andere Dateien zuzugreifen.

Kurz gesagt, ich sauge dir irgendwelche Dateien von deiner Festplatte...

Und da hat Firefox schon recht, wenn er den Dienst versagt.

Gruss
Schorsch

[wahsaga]

hi,

Moment, das dürfte eigentlich nicht gehen.
Stell dir vor, so könnte ich ja einfach eine Webseite bauen und ein Bildtag wie:

<img src="C:/windows/irgendwas.jpg" />

reinschreiben.

Nee, so wird's nicht gehen.

Und schon siehst du auf der Webseite eine deiner Dateien. Wenn es möglich ist, Bilder darzustellen müsste es auch möglich sein, auf andere Dateien zuzugreifen.

Kurz gesagt, ich sauge dir irgendwelche Dateien von deiner Festplatte...

Wo "saugst" du da bitte was?
Es wird (so es denn funktioniert) auf meinem Rechner eine Datei dargestellt, die sich eh schon auf meinem Rechner befand.
Was hast du da jetzt "gesaugt" ...?

Und da hat Firefox schon recht, wenn er den Dienst versagt.

Nee, aber er möchte lokale Ressourcen über das Pseudo-Protokoll file:// angesprochen haben.

gruß,
wahsaga

[Schorsch]

Salut

Kurz gesagt, ich sauge dir irgendwelche Dateien von deiner Festplatte...

Wo "saugst" du da bitte was?

Mit einem input type="file". Ich belege es mit dem Pfad einer Systemdatei und lasse diese im Hintergrund auf den Server uploaden.
(Funktioniert in Firefox nicht)

Ich dachte:
Wenn man ein Bild, welches nicht auf dem Server, sondern auf dem Client liegt, im Browser darstellen kann, liegt die Vermutung bereits ein bisschen näher, dass ich das Bild nicht nur darstellen, sondern auch noch weitere Dinge mit ihm anstellen kann.
Und wenn dies mit einem Bild geht, geht es vielleicht sogar auch mit anderen Daten.

Dies dünkt mich etwas beunruhigend und daher die Vermutung, dass Firefox so etwas gleich von Beginn gar nicht erst zulässt.
Reine Vermutung.

Gruss
Schorsch

[wahsaga]

hi,

Wo "saugst" du da bitte was?

Mit einem input type="file". Ich belege es mit dem Pfad einer Systemdatei und lasse diese im Hintergrund auf den Server uploaden.
(Funktioniert in Firefox nicht)

Natürlich nicht.
Input type="file" lässt sich nicht mit einem value (vor-)belegen.

Dies dünkt mich etwas beunruhigend und daher die Vermutung, dass Firefox so etwas gleich von Beginn gar nicht erst zulässt.
Reine Vermutung.

Du hast Alex' Problem gar nicht verstanden:
Er will den User eine Bilddatei über das Input-Feld auswählen lassen, und dann den Pfad dort auslesen (das geht idR.), und dann damit ein img-Objekt erzeugen für eine Vorschau vor dem Hochladen.
gruß,
wahsaga

[*Alex*]

Hallo wahsaga

Input type="file" lässt sich nicht mit einem value (vor-)belegen.

ne Menge "älterer" Browser machen da trotzdem mit:
selfhtml 8.0:
Mit dem Attribut value= in Verbindung mit <input type="file"> können Sie das Feld mit einem Wert vorbelegen, z.B. value="C:\autoexec.bat".

selfhtml 8.1.1
Das Attribut value in Verbindung mit <input type="file">, mit dem das Vorbelegen der Dateiauswahl möglich wäre, wird von moderneren Browsern aus Sicherheitsgründen nicht mehr unterstützt.

Es ging bis vor Kurzem.

Wenn aber FireFox lokale Bilder, deren Pfad in die Adresszeile eingegeben wird anzeigt, wieso dann nicht auch im Dokument?

muchas gracias
   *Alex*

[*Alex*]

Hallo wahsaga

Nee, aber er möchte lokale Ressourcen über das Pseudo-Protokoll file:// angesprochen haben.

Ja! Ja! Genau sowas schwebt mir vor (die absolute lokale Adressierung einem Nicht-MS-Programm zugänglich machen) - was ist das und wie geht das?

*Alex*

[Jonathan]

Um es klar zu sagen:

Firefox erlaubt es Internet-Seiten nicht, Lokale Objekte einzubinden. Weder irgendwelche Grafiken, nich irgendwelche anderen Sachen. Die Art der Protokollangabe spielt dabei auch keine Rolle, da es der Firefox wie gesagt nicht erlaubt. Punkt, aus, vorbei.

http://www.firefox-browser.de/wiki/Lokale_Bilder

Jonathan

[Klawischnigg]

Hi there,

Funktioniert prima mit IE.
FireFox kommt bis zum Zusammenstellen des Imagetags mit, aber er schreibt ihn nicht in die Vorschau.

Warum nicht?

Weil das mit dem FF nicht funktioniert, zwar nicht prinzipiell nicht, wie Jonathan behauptet, sondern nur dann, wenn das Bild im selben Verzeichnis wie das Javascript enthaltende Html-Dokument oder in einem Subdirectory desselben liegt...

[Jonathan]

Ich habe nicht behauptet, dass Firefox prinzipiell keine Bilder einbindet oder sowas.

Ich habe geschrieben, dass eine Seite _im Internet_ nicht auf eine _lokale Datei_ zugreifen darf. Und das eine lokale Datei im selben Verzeichnis wie eine Webseite im Internet liegt ist ja wohl ausgeschlossen.

[Klawischnigg]

Hi there,

Ich habe nicht behauptet, dass Firefox prinzipiell keine Bilder einbindet oder sowas.

kein Problem, hab ich auch nicht so verstanden.

Ich habe geschrieben, dass eine Seite _im Internet_ nicht auf eine _lokale Datei_ zugreifen darf. Und das eine lokale Datei im selben Verzeichnis wie eine Webseite im Internet liegt ist ja wohl ausgeschlossen.

Ja aber FF macht da keinen Unterschied, ob das Script im Internet oder local aufgerufen wird...

[Jonathan]

Ja aber FF macht da keinen Unterschied, ob das Script im Internet oder local aufgerufen wird...

Ich vermute, wir reden aneinander vorbei und meinen doch das gleiche. ;)

Jonathan

[*Alex*]

Hi

Weil das mit dem FF nicht funktioniert, zwar nicht prinzipiell nicht, wie Jonathan behauptet, sondern nur dann, wenn das Bild im selben Verzeichnis wie das Javascript enthaltende Html-Dokument oder in einem Subdirectory desselben liegt...

In welchem Verzeichnis werden die Dokumente aus dem Netz bei Windows-XP eigentlich vorgehalten?
Wie auch immer, wie kommst Du darauf, dass gerade dort das Bild liegt?
Mißverständnis?
   *Alex*

[Klawischnigg]

Hi there,

In welchem Verzeichnis werden die Dokumente aus dem Netz bei Windows-XP eigentlich vorgehalten?

beats me...

Wie auch immer, wie kommst Du darauf, dass gerade dort das Bild liegt?
Mißverständnis?

vielleicht. Ich habe es so verstanden, daß Du ein Bild vorher anzeigen lassen möchtest, ehe man es auf einen Server hochlädt. Das klappt mit dem FF aber nicht, da dort die der javascriptanweisung document.src="blabla.jpg" nur funktioniert, wenn blabla.jpg entweder im gleichen Verzeichnis liegt oder in einem Subdirectory. Nicht angezeigt wird es, wenn blabla.jpg irgendwo auf dem Rechner liegt...

[*Alex*]

Hi

Also, Konzept meines Scriptes war:

User ruft Uploadseite auf
macht alle möglichen Eingaben
u.a. auf Wunsch auch eine Grafik
JavaScript bastelt daraus eine Vorschau
der User kann über Eingabefelder das style-Attribut der Grafik beeinflussen
z.B. Position und Größe der Grafik
die Vorschau macht brav mit
wenn der User zufrieden ist klickt er submit
Dann wird alles zusammen hochgeladen und genauso angezeigt, wie der User es gebastelt hat

Mein oller IE machts.
Aber wenn die modernen Browser das nu alle nich mehr wollen, muss ich wohl einen Grafik-Dummy zum Rumschieben einbauen.

Nochmal vielen Dank an alle.

*Alex*

[Klawischnigg]

Hi there,

User ruft Uploadseite auf
macht alle möglichen Eingaben
u.a. auf Wunsch auch eine Grafik
JavaScript bastelt daraus eine Vorschau
der User kann über Eingabefelder das style-Attribut der Grafik beeinflussen
z.B. Position und Größe der Grafik
die Vorschau macht brav mit
wenn der User zufrieden ist klickt er submit
Dann wird alles zusammen hochgeladen und genauso angezeigt, wie der User es gebastelt hat

Ja, haben wir uns nicht missverstanden, bei genau so einer Geschichte ist mir das mit dem FF und seinem Verhalten diesbezüglich aufgefallen.

Mein oller IE machts.
Aber wenn die modernen Browser das nu alle nich mehr wollen, muss ich wohl einen Grafik-Dummy zum Rumschieben einbauen.

Mit Vorschau wird nichts, Bearbeitungsmöglichkeit mit Javascript habe ich halt nach dem Upload zu Verfügung gestellt. Wenn das Bild einmal am Server ist, kannst Du natürlich auch mit Javascript machen, was damit halt möglich ist; zB Schneidmarken anbringen und dann mit PHP zurechtschneiden oder was weiß ich, da gibts viele Möglichkeiten...