File handling mit HTML

[marco]

Hi,

gibt es eine möglich keit zu überprüfen ob eine Datei vorhanden ist oder nicht?? z.B. ein Bild.

Das ganze muss nur im Netztwerk funktionieren und sollte ohnen Server auskommen. Das Ziel ist, das es eine Seite gibt, auf der Links für jeden Tag des Monats sind. Außerdem gibt es für jeden Tag einen Ordner. Wenn ich jetzt eine Datei in dem entsprechenden Ordner speichere soll der Link eine andere Farbe haben und das Bild anzeigen. Wenn der Ordner leer ist soll der link grau sein und wenn man draufklickt soll sich eine andere Seite öffnen auf der steht dass das Bild noch nicht verfügbar ist.

Zur Zeit hab ich das ganze so gelöst, das in jedem Ordner ein Bild mit dem Vorgegebenen Namen ist, dass den entsprechenden Text zeigt. Dieses Bild ersetzte ich dann immer durch das aktuelle Bild. Das Verbrauch aber Speicher. Das würd es irgentwann sowieso, aber bis die aktuellen Bilder da sind, brauch ja kein Platz verschwendet werden.

Hat vielleicht Jemand ne Idee mit PHP kann ich ja eine Datei laden und abfragen ob das laden erfolgreich war. Geht sowas ähnliches auch ohne Server?

[Linksetzer]

gibt es eine möglich keit zu überprüfen ob eine Datei vorhanden ist oder nicht?? z.B. ein Bild.

http://selfhtml.teamone.de/javascript/sprache/eventhandler.htm#onerror

[marco]

http://selfhtml.teamone.de/javascript/sprache/eventhandler.htm#onerror

Das ist eine gute Idee, aber da wird ja erst geprüft, ob das Bild da ist nachdem des Bild geladen wurde, dass soll ja nicht Sinn der Sache sein.

Ich stell mir das ungefähr so vor.

Bild=ist_bild_da();

if(Bild==1){Pfad=...}else{Pfad=...}

[TorstenA]

Hallo,

http://selfhtml.teamone.de/javascript/sprache/eventhandler.htm#onerror
Das ist eine gute Idee, aber da wird ja erst geprüft, ob das Bild da ist nachdem des Bild geladen wurde, dass soll ja nicht Sinn der Sache sein.
Ich stell mir das ungefähr so vor [...]

Was hindert dich daran, es so zu machen:
<img src="./bild1.gif" onError="this.src='./bild2.gif'">
Wenn Bild1 als Standardbild nicht vorhanden ist, wird bild2 geladen. Das wolltest du doch, oder habe ich da was nicht richtig verstanden?

Grüße
Torsten

[marco]

Oh man klar, das hätte mir auch selbst einfallen können.

Danke, das hilft aber nicht bei meinem zweiten Problem

der Link zu dem Bild soll sich ändern wenn das bild nicht im ordner ist.

Siehe erster Beitrag

[TorstenA]

Hallo,

der Link zu dem Bild soll sich ändern wenn das bild nicht im ordner ist.

Dann rufe doch onError eine Funktion auf, die sowohl das Bild als auch den Link ändert.

Grüße
Torsten

[Raik]

Hallo,

Dann rufe doch onError eine Funktion auf, die sowohl das Bild als auch den Link ändert.

... und lege das bild2 nicht in einen der unterordner sondern nur ein mal in die root.

freundl. grüsse aus berlin, Raik

[marco]

Hallo,

Dann rufe doch onError eine Funktion auf, die sowohl das Bild als auch den Link ändert.

... und lege das bild2 nicht in einen der unterordner sondern nur ein mal in die root.

freundl. grüsse aus berlin, Raik

Soweit bin ich auch schon hekommen.

Aber, es geht nicht darum, dass wenn ein bild nicht Geladen wird soll der Link für das Bild geändert werden, sondern der Link zum Bild soll sich ändern wenn es nicht da ist, sprich ich habe eine Liste mit Links, alle Links die zu einem vorhandenen Bild führen sollen z.HB. blau sein und zu dem Bild führen, alle anderen sollen grau sein und zu einem default Bild führen.

Wie schon erwähnt hab ich mir das so vorgestellt, dass in eine Variable geschrieben wird ob ein Bild da ist oder nicht und entsprechd laufen dann die funktionen ab.

z.B.

---------------------------------------------------------------------

var bild;
bild=<gesuchte_Funktion_die_abfrägt_ob_bild_geladen_werde_kann>();
if(bild==1){
farbe des Links ist blau;
}elseif(bild==0){
Farbe des bildes ist grau;
}
---------------------------------------------------------------------

es geht jetzt nur um die funktion, NICHT darum wie ich die Farbe ändere das weiß ich, nur um Missverständnisen vor zu beugen.

[TorstenA]

Hallo Marco,

bild=<gesuchte_Funktion_die_abfrägt_ob_bild_geladen_werde_kann>();

Du kannst mit Hilfe von JavaScript die Existenz einer Ressource auf dem Server nicht abfragen, musst also erst das Bild versuchen zu laden, damit du JavaScript überhaupt ins Spiel bringen kannst, um mit onError die Linkfarbe und das Verweisziel zu ändern. Willst du diesen Ladeversuch nicht, musst du dann doch auf eine serverseitige Programmiersprache zurückgreifen.

Grüße
Torsten

[marco]

Willst du diesen Ladeversuch nicht, musst du dann doch auf
eine serverseitige Programmiersprache zurückgreifen.

Danke, dass wollte wissen. Naja kann man nix machen. Falls jemandem eintrick einfällt, wie das Problem Doch gelöst werden könnte. Kann er's hier ja mal schreiben.

[Struppi]

Hi,

gibt es eine möglich keit zu überprüfen ob eine Datei vorhanden ist oder nicht?? z.B. ein Bild.

Das ganze muss nur im Netztwerk funktionieren und sollte ohnen Server auskommen. Das Ziel ist, das es eine Seite gibt, auf der Links für jeden Tag des Monats sind. Außerdem gibt es für jeden Tag einen Ordner. Wenn ich jetzt eine Datei in dem entsprechenden Ordner speichere soll der Link eine andere Farbe haben und das Bild anzeigen. Wenn der Ordner leer ist soll der link grau sein und wenn man draufklickt soll sich eine andere Seite öffnen auf der steht dass das Bild noch nicht verfügbar ist.

Zur Zeit hab ich das ganze so gelöst, das in jedem Ordner ein Bild mit dem Vorgegebenen Namen ist, dass den entsprechenden Text zeigt. Dieses Bild ersetzte ich dann immer durch das aktuelle Bild. Das Verbrauch aber Speicher. Das würd es irgentwann sowieso, aber bis die aktuellen Bilder da sind, brauch ja kein Platz verschwendet werden.

Ich weiß ja nicht, was du mit "verbraucht Speicher" meinst, aber solange deine Bilder nicht x MB groß sind ist das heutzutage kein Problem. Oder hats du noch einen 286'er?

Wenn du aber trotzdem denkst, dass dein vorhaben sinvoll ist, musst du asynchron arbeiten, da du im Browser nicht auf das Dateisystem des Servers zugreifen kannst, sondern nur eine Anfrage senden und dann musst du warten ob was passiert. dazu dienen die Events onerror/onload

Ein kurzes ungetestetes Beispiel:

function checkBild(url)
{
var bild = new Image();
bild.onerror = fehler;
bild.onload = ok;
bild.src = url;
}

function fehler()
{
    alert(this.src + ' existiert nicht');

//und hier kannst du dann machen was du bei einem Fehler machen willst
}

function ok()
{
    alert(this.src + ' existiert');

//und hier was du bei der existienz des Bildes machen willst.
}

Das funktioniert soweit analog auch mit dem HTML Tag, doch dabei musst du schwer aufpassen, denn wenn du sowas machst:

<img src="bild1.gif"
onerror="this.src='bild2.gif'">

kriegst du eine Endlosschleife falls bild2.gif nicht existiert aus welchen Grund auch immer.

Struppi.

[TorstenA]

Hallo Struppi,

Ein kurzes ungetestetes Beispiel:
function checkBild(url)
{
var bild = new Image();
bild.onerror = fehler;
bild.onload = ok;
bild.src = url;
}

Hm, wo wird denn hier eine Anfrage nach dem Bild gesendet? Du weist doch nur dem Objekt "bild" eine URL zu, eine Anfrage wird doch dadurch nicht automatisch gesendet, oder habe ich da was falsch verstanden?

Grüße
Torsten

[Struppi]

Hallo Struppi,

Ein kurzes ungetestetes Beispiel:
function checkBild(url)
{
var bild = new Image();
bild.onerror = fehler;
bild.onload = ok;
bild.src = url;
}

Hm, wo wird denn hier eine Anfrage nach dem Bild gesendet? Du weist doch nur dem Objekt "bild" eine URL zu, eine Anfrage wird doch dadurch nicht automatisch gesendet, oder habe ich da was falsch verstanden?

Wie wär es, wenn du es einfach mal probierst?

Struppi.

[TorstenA]

Hallo Struppi,

Wie wär es, wenn du es einfach mal probierst?

Habe ich, sonst hätte ich nicht nachgefragt (Testumgebung Win98SE, IE 6.0.2600). Hier mal der abgekürzte Code:

Im Head:
<script type="text/javascript">
<!--
function checkBild(url)
{
var bild = new Image();
bild.onLoad = ok(url);
bild.onError = fehler(url);
bild.src = url;
}
function fehler(url2)
{
 alert(url2 + ' existiert nicht');
}
function ok(url3)
{
 alert(url3 + ' existiert');
}
-->
</script>

Und im Body: <body onLoad="checkBild('bild')">, wobei "bild" die URL eines definitiv existierenden Bildes ist.

Grüße
Torsten

[Struppi]

Hallo Struppi,

Wie wär es, wenn du es einfach mal probierst?

Habe ich, sonst hätte ich nicht nachgefragt (Testumgebung Win98SE, IE 6.0.2600). Hier mal der abgekürzte Code:

Der nicht dem entspricht was ich dir geschrieben habe!

function checkBild(url)
{
var bild = new Image();
bild.onLoad = ok(url);
bild.onError = fehler(url);

wo steht das im Orginal von mir?????

Es muss heißen:
bild.onLoad = ok;
bild.onError = fehler;

So weist dem Event eine Funktionsreferenz zu und was du machen wilst, ist dem Event das Ergebnis (den Rückgabewert) einer Funktion zuweisen, das macht aber keinen Sinn.

Struppi.

[TorstenA]

Hallo Struppi,

Der nicht dem entspricht was ich dir geschrieben habe!

Ich bitte um Nachsicht :-)
Der JS-Code ist geändert mit dem Ergebnis, dass nichts passiert, auch keine Fehlermeldung. Den Code habe ich jetzt 1:1 aus deinem Ursprungsposting rauskopiert und in den Head geschrieben. Wenn ich das richtig verstanden habe, muss doch die Funktion checkBild(url) aufgerufen werden, damit den Eventhandlern eine Referenz auf die Funktionen zugewiesen wird. Ich habe das jetzt mit <body onLoad="..."> gemacht.

Gut, so weit klar. Jetzt fehlt mir nur noch der nächste Schritt, nämlich wie die Funktionen beim Ladeversuch des Bildes auch tatsächlich ausgeführt werden. Mache ich es so:

<img src="./bild.jpg" onLoad="ok()" onError="fehler()">

brauche ich doch die Funktion checkBild() gar nicht, oder? Irgendwie steht gerade irgendwas auf meiner Leitung.

Grüße
Torsten

[Struppi]

Hallo Struppi,

Der nicht dem entspricht was ich dir geschrieben habe!

Ich bitte um Nachsicht :-)

Keine Gnade für Newbies - aber leider fällt mir keine momentan Disziplinierungsmöglichkeit ein ;-)

Der JS-Code ist geändert mit dem Ergebnis, dass nichts passiert, auch keine Fehlermeldung. Den Code habe ich jetzt 1:1 aus deinem Ursprungsposting rauskopiert und in den Head geschrieben. Wenn ich das richtig verstanden habe, muss doch die Funktion checkBild(url) aufgerufen werden, damit den Eventhandlern eine Referenz auf die Funktionen zugewiesen wird. Ich habe das jetzt mit <body onLoad="..."> gemacht.

Ist nicht notwenidig.

du kannst die einfach so aufrufen:

checkBild('http://forum.de.selfhtml.org/src/xweb.gif');
checkBild('blabla');

Gut, so weit klar. Jetzt fehlt mir nur noch der nächste Schritt, nämlich wie die Funktionen beim Ladeversuch des Bildes auch tatsächlich ausgeführt werden. Mache ich es so:

<img src="./bild.jpg" onLoad="ok()" onError="fehler()">

brauche ich doch die Funktion checkBild() gar nicht, oder? Irgendwie steht gerade irgendwas auf meiner Leitung.

Ja, du musst nur den Funktionen das Objekt als Paramter übergeben:

<img src="./bild.jpg" onLoad="ok(this)" onError="fehler(this)">

und in der Funkiton halt die Parameter nutzen.

Struppi.

[TorstenA]

Ich bitte um Nachsicht :-)
Keine Gnade für Newbies

Danke, dass du nicht Noob gesagt hast ;-)

aber leider fällt mir keine momentan Disziplinierungsmöglichkeit ein ;-)

Och, also ich wüsste keinen Anlass für eine Disziplinierungsmaßnahme.

[...] Ich habe das jetzt mit <body onLoad="..."> gemacht.
Ist nicht notwenidig.
du kannst die einfach so aufrufen:
checkBild('http://forum.de.selfhtml.org/src/xweb.gif');
checkBild('blabla');

Meinst du bspw. in einem script-Element im Body?

brauche ich doch die Funktion checkBild() gar nicht, oder? Irgendwie steht gerade irgendwas auf meiner Leitung.
Ja, du musst nur den Funktionen das Objekt als Paramter übergeben:

Nun fehlt mir noch das letzte Stückchen Verständnis. Wozu braucht es dann die Funktion checkBild(url), denn im Ergebnis wird doch nichts anderes gemacht, als dass statt onError="this.src='bla.jpg'" die Funktion fehler(this) aufgerufen wird.

Grüße
Torsten

[Struppi]

Ich bitte um Nachsicht :-)
Keine Gnade für Newbies

Danke, dass du nicht Noob gesagt hast ;-)

hatte ich erts vor.

aber leider fällt mir keine momentan Disziplinierungsmöglichkeit ein ;-)

Och, also ich wüsste keinen Anlass für eine Disziplinierungsmaßnahme.

ok, stimmt, wir kommen ja der Sache näher.

[...] Ich habe das jetzt mit <body onLoad="..."> gemacht.
Ist nicht notwenidig.
du kannst die einfach so aufrufen:
checkBild('http://forum.de.selfhtml.org/src/xweb.gif');
checkBild('blabla');

Meinst du bspw. in einem script-Element im Body?

genau.
Allerdings kommt es natürlich drauf an was du in den Funktionen machen willst, evtl. sollte das dann doch erst onload passieren.

brauche ich doch die Funktion checkBild() gar nicht, oder? Irgendwie steht gerade irgendwas auf meiner Leitung.

Wenn du ein Bild in deinem Dokument überprüfen willst - ja.

Die Funktion war als Beispiel gedacht

Ja, du musst nur den Funktionen das Objekt als Paramter übergeben:

Nun fehlt mir noch das letzte Stückchen Verständnis. Wozu braucht es dann die Funktion checkBild(url), denn im Ergebnis wird doch nichts anderes gemacht, als dass statt onError="this.src='bla.jpg'" die Funktion fehler(this) aufgerufen wird.

die Funktion braucht es ertsmal gar nicht, die brauchst du nur, wenn du irgendwas im Hintergrund machen willst, also nicht während die Seite nagezeigt wird.

Und wie gesagt, aufpassen, das du onerror nicht mehrmals wirfst. Denn wenn du in der Funktion error() die Quelle des bildes änderst wird evtl. wieder die Funktion aufgerufen, was schnell in einer Endlosschleife endet.

Struppi.

[TorstenA]

Danke, dass du nicht Noob gesagt hast ;-)
hatte ich erts vor.

Dachte ich's mir doch.

die Funktion [...] brauchst du nur, wenn du irgendwas im Hintergrund machen willst, also nicht während die Seite nagezeigt wird.

Wie würde so etwas aussehen?

Grüße
Torsten

[Struppi]

die Funktion [...] brauchst du nur, wenn du irgendwas im Hintergrund machen willst, also nicht während die Seite nagezeigt wird.

Wie würde so etwas aussehen?

<a href="#"
onclick="checkBild('http://forum.de.selfhtml.org/src/xweb.gif');return false"

ist selfhtml online?</A>

Struppi.

[TorstenA]

Wie würde so etwas aussehen?
<a href="#"
onclick="checkBild('http://forum.de.selfhtml.org/src/xweb.gif');return false"
ist selfhtml online?</A>

Hm, ich habe das jetzt mal getestet, die drei Funktionen in den Head, den Link in den Body. Aber das funktioniert leider nicht in meiner vorliegenden Testumgebung, es passiert einfach gar nichts, obwohl doch eigentlich eine Alertbox aufgehen sollte. Eine Fehlermeldung ist auch nicht zu entdecken :-(

Deshalb wieder zurück zu meiner Ausgangsfrage in [pref:t=63789&m=362759], wo wird im vorliegenden Codeschnipsel die Ressource angefordert, denn - wenn ich das richtig verstanden habe - ohne die Anforderung kann doch kein Ereignis behandelt werden, da keins vorliegt, oder bin ich immer noch auf dem Holzweg?

Grüße
Torsten

[Struppi]

Hm, ich habe das jetzt mal getestet, die drei Funktionen in den Head, den Link in den Body. Aber das funktioniert leider nicht in meiner vorliegenden Testumgebung, es passiert einfach gar nichts, obwohl doch eigentlich eine Alertbox aufgehen sollte. Eine Fehlermeldung ist auch nicht zu entdecken :-(

und für dich auch noch mal eine Testseite:
http://home.arcor.de/struebig/js/test/test von onload.html

Struppi.

[TorstenA]

und für dich auch noch mal eine Testseite:
http://home.arcor.de/struebig/js/test/test von onload.html

Das ist seltsam, der Quellcode, der von mir getestet wurde, war ähnlich deinem, nur als HTML 4.01 Strict. Könnte allerdings auch am Firmennetz liegen, denn hier am heimischen PC geht es sowohl mit dem IE 6 als auch mit Mozilla 1.4. Ich werde das morgen noch mal checken.

Vielen Dank für deine Geduld :-)
Torsten

[TorstenA]

Morgen Struppi,

http://home.arcor.de/struebig/js/test/test von onload.html

Du wirst es mir nicht glauben, aber was deine Funktion tun soll, war mir schon klar, es hat halt nur hier nicht funktioniert, weshalb ich davon ausging, dass irgendwo ein Denkfehler meinerseits vorliegt. Fakt ist, dass dein Beispiel hier (Win98SE, IE 6.0.2600) nur funktioniert, wenn ich sie über den von dir geposteten Link aufrufe, ein Aufruf einer lokalen Datei mit identischem Inhalt funktionierte zwar gestern Abend zu Hause, hier aber wiederum nicht. Warum das so ist, ist mir ein Rätsel :-(

Viele Grüße
Torsten

[Struppi]

http://home.arcor.de/struebig/js/test/test von onload.html

Du wirst es mir nicht glauben, aber was deine Funktion tun soll, war mir schon klar, es hat halt nur hier nicht funktioniert, weshalb ich davon ausging, dass irgendwo ein Denkfehler meinerseits vorliegt. Fakt ist, dass dein Beispiel hier (Win98SE, IE 6.0.2600) nur funktioniert, wenn ich sie über den von dir geposteten Link aufrufe, ein Aufruf einer lokalen Datei mit identischem Inhalt funktionierte zwar gestern Abend zu Hause, hier aber wiederum nicht. Warum das so ist, ist mir ein Rätsel :-(

Heißt identisch der gleiche Inhalt oder hast du etwas modifiziert?
Ich hab hier mit WinXP und dem IE 6 keine Probleme.

Struppi.

[TorstenA]

Heißt identisch der gleiche Inhalt oder hast du etwas modifiziert?
Ich hab hier mit WinXP und dem IE 6 keine Probleme.

Jepp, identisch heißt absolut gleicher Inhalt. Lediglich mit dem Doctype hatte ich gestern abend noch herumexperimentiert (mit deinem, mit HTML 4.01 strict, ganz ohne), was aber dort (gleiche Testumgebung wie deine) keine Auswirkungen auf die Ausführbarkeit hatte. Ich kann es mir absolut nicht erklären.

Grüße
Torsten

[Struppi]

Jepp, identisch heißt absolut gleicher Inhalt. Lediglich mit dem Doctype hatte ich gestern abend noch herumexperimentiert (mit deinem, mit HTML 4.01 strict, ganz ohne), was aber dort (gleiche Testumgebung wie deine) keine Auswirkungen auf die Ausführbarkeit hatte. Ich kann es mir absolut nicht erklären.

cache!

Struppi.

[TorstenA]

Ich kann es mir absolut nicht erklären.
cache!

Ganz so blöd bin ich nun auch wieder nicht ;-)
Den Cache hatte ich mehrfach geleert, allerdings legt der Proxyserver so eine Art eigenen Cache an, ob es damit was zu tun haben könnte? Den kann ich jedenfalls nicht von hier aus leeren, da müsste ich an den Server.

Grüße
Torsten

[Struppi]

Hallo Struppi,

Ein kurzes ungetestetes Beispiel:

ok und jetz für dich ganz langsam:

function checkBild(url)

Das ist die Funktion checkBild der Parameter url soll enine URL für das BIld darstellen.

{
var bild = new Image();

wir kreiren ein Image Objekt.

bild.onerror = fehler;
bild.onload = ok;

Wir weisen dem Image Objekt Fehler- und Loadhandler eine Funkionsreferenz zu. Diese wird aufgerufen, wenn das Ereigniss eintritt.

bild.src = url;

Hier weisen wir dem Bild Objekt eine Quelle zu, der Browser versucht nun die URL zu laden.

Klappt das, dann wird, sobald das Bild fertig geladen ist, die Funktion ok() aufgerufen. Klappt das nicht die Funktion fehler(). In den Funktionen, kannst du jetzt mit this auf das Bild Objekt zugreifen.

Das funktioniert mindestens seit Netscape 3 (beim IE 3 weiss ich's nicht genau) bestens.

Capito?

Struppi.

[TorstenA]

ok und jetz für dich ganz langsam:
[...]
Capito?

Ja, danke. Ich kann mir nur im Moment nicht erklären, warum es hier zu Hause funktioniert und in der Firma nicht. Aber wie Cheatah schon weiter oben irgendwo bemerkte, ist der IE wohl nicht das rechte Testwerkzeug :-)

Grüße
Torsten