matthias: lokale Bilder einbinden

Hallo NG'lers

ich suche derzeit nach einer Möglichkeit, ein lokales Bild in eine Webseite einzubauen. Hintergrund: ein kleines Tool, mit dem man seine Webseite ein wenig pflegen kann. Die Systeme, die ich kenne, bringen diese Funktionalität in der Form leider nicht mit, aber man kann sie ja erweitern.

Der Nutzer soll mit Hilfe eines <input type="file"...> ein Bild von seiner Festplatte auswählen können und, sagen wir mal, auf onChange soll dieses Bild dann in der HTML-Seite dargestellt werden. IE macht da, wen wunderts, überhaupt keine Probleme, das Bild wird sofort angezeigt. Netscape stellt sich da etwas komplizierter an, versteht die onChange-Anweisung nicht wie ich es gern hätte.

Gibts irgendwo ein "fertiges" Script, eine doch schon ausfürhliche Suche hat bei mir noch nichts ergeben.

Hier nochmal die einfache Version meiner HTML-Datei zur Veranschaulichung:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function bildwechsel() {
 document.testbild.src=document.bild.bildquelle.value;
}

//-->
</script>

</head>

<body>
<form name="bild">
<img src="test.jpg" name="testbild" width="100" height="100" id="testbild"> <br>

<input type="file" onChange="bildwechsel()" name="bildquelle">
<input type="button" onClick="bildwechsel()">
</form>
</body>
</html>

Dankbar für jeden Tip
Gruß
Matthias

  1. hallo matthias,

    Hallo NG'lers

    Dies hier ist keine NG, sondern ein Forum.

    Der Nutzer soll mit Hilfe eines <input type="file"...> ein Bild von seiner Festplatte auswählen können und, sagen wir mal, auf onChange soll dieses Bild dann in der HTML-Seite dargestellt werden.

    Warum soll das so sein?

    Hier nochmal die einfache Version meiner HTML-Datei zur Veranschaulichung

    Wieso "nochmal", hattest du dasselbe schonmal gefragt?

    document.testbild.src=document.bild.bildquelle.value;

    hm. Bist du sicher, daß diese Source dann tatsächlich ein Bild auf der Festplatte deines Seitenbesuchers anspricht?

    <img src="test.jpg" name="testbild" width="100" height="100" id="testbild"> Die hier angegebene Source tut das jedenfalls nicht, heir wird ein Bild angesprochen, das sich auf dem Server befindet.

    Prinzipiell wäre das, was du möchtest, mit Javascript tatsächlich möglich. Aber sehr sinnvoll ist es nicht. Die Voraussetzung, daß grundsätzlich _jeder_ deiner Seitenbesucher tatsächlich eine Bilddatei mit dem gewünschten Format und an der gewünschten Stelle auf seinem Rechner liegen hat, ist verschwindend gering. Man sollte mit solchen Dingen möglichst überhaupt nicht herumzuspielen versuchen  -  es sei denn, du bist dabei, ein Firmen-Intranet zu konfigurieren und kannst dich darauf verlassen, daß _sämtliche_ im Intranet zugriffsfähigen Rechner tatsächlich über eine solche Bilddatei im angegebenen Pfad verfügen.

    Grüße aus Berlin

    Christoph S.

    1. Hallo NG'lers
      Dies hier ist keine NG, sondern ein Forum.

      Der Nutzer soll mit Hilfe eines <input type="file"...> ein Bild von seiner Festplatte auswählen können und, sagen wir mal, auf onChange soll dieses Bild dann in der HTML-Seite dargestellt werden.
      Warum soll das so sein?

      damit diese Datei danach mittels PHP auf den Server übertragen werden kann. Ich fände es gut, wenn der Nutzer nicht aus Versehen 8Mb Jpg hochladen soll, um danach festzustellen, daß es das falsche Bild war.

      » »» Hier nochmal die einfache Version meiner HTML-Datei zur Veranschaulichung

      Wieso "nochmal", hattest du dasselbe schonmal gefragt?

      Nee, aber vielleicht hilfts für das Verständnis.

      document.testbild.src=document.bild.bildquelle.value;
      hm. Bist du sicher, daß diese Source dann tatsächlich ein Bild auf der Festplatte deines Seitenbesuchers anspricht?

      beim IE schon, beim Mac gibt's mit dieser "einfachen" Version Probleme und beim Netscape (sowieso).

      <img src="test.jpg" name="testbild" width="100" height="100" id="testbild"> Die hier angegebene Source tut das jedenfalls nicht, heir wird ein Bild angesprochen, das sich auf dem Server befindet.

      Das ist ein "PLatzhalter", sagen wir mal, um dem User kenntlich zu machen, daß er noch kein Bild eingefügt hat.

      Prinzipiell wäre das, was du möchtest, mit Javascript tatsächlich möglich. Aber sehr sinnvoll ist es nicht.

      Ich denke, der Punkt ist abgehakt, vielleicht hatte ich mich ein wenig zu ungenau ausgedrückt. Wenn's aber möglich ist, vielleicht hat ja jemand eine gute Idee :-)

      Christoph, ich fand Deinen Beitrag dazu nicht gerade berauschend, eher etwas hart, kurze, negative Aussagen, sory :-(

      Gruß
      Matthias