Bild Datei von Festplatte auswählen (Button) und an bestimmter Stelle im Vordergrund anzeigen!

[bengl1984]

Hallo liebes Forenteam, ich benötige Eure Hilfe:
Ich möchte eine Grafik (z.B. ein Kamera-Symbol) als Button haben, die ein Dateiverzeichnis Dialog öffnet (Android und Windows-Geräte) in der man Bilddateien öffnen und auswählen kann.
Diese soll dann an bestimmter Stelle in vordefinierten Größenlimits im Vordergrund angezeigt und in die Darstellung der HTML-Seite mit eingebunden werden.
(Beispiel 300x200 pixel).
Ich hoffe ihr könnt mir weiterhelfen.

 

[Sempervivum]

Ich habe da mal eine einfache Demo aus der Schublade heraus gesucht, versuche, ob sie dir weiter hilft:

    <img id="testimg">
    Choose a file: <input type="file" id="testfile">
    <script>
        document.getElementById("testfile").addEventListener("change", function () {
            var file = this.files[0];
            var reader = new FileReader();
            reader.onloadend = function (event) {
                // console.log(event.target.result);
                document.getElementById('testimg').src = event.target.result;
            }
            reader.readAsDataURL(file);
        });
    </script>

Dieses:

in vordefinierten Größenlimits

wird noch nicht berücksichtigt aber ich denke, man kann das am einfachsten mit CSS erledigen.

 

[bengl1984]

Hi Sempervivum, danke für deine schnelle Antwort. Ja, das funktioniert als einzelner code aber nicht in dem html projekt was ich modifizieren möchte.
Könnte ich dir die html datei privat schicken und du schaust Dir mal den Quelltext an und ich demonstriere was ich möchte? Das wäre super von Dir!

 

[bengl1984]

Das ist die Webseiten Oberfläche von dem Projekt:
Bei 1, 1-2, 1-3 möchte ich wenn man auf die roten Bereiche klickt dass sich die Dateiauswahl Typ Image öffnet und danach jeweils im geklickten Kästchen das ausgewählte Bild mit dem Breitenlimit der kleinen roten kästchen angezeigt wird.

Bei 2 Möchte ich dasselbe bloß mit einer größeren Width angepasst an den roten Bereich Nummer 2. Alle 4 Flächen sollen seperat mit verschiedenen Bildern bestückbar sein.

Vielen Dank.

An Sempervivum: Ich kann dir das Passwort für die angehängte Zip Datei per PM schicken, wenn du mir helfen möchtest.

 

[Sempervivum]

Selbstverständlich möchte ich dir helfen, schick mir das Passwort.