Profil von HermCrafter

Frage

15.08.2021, 08:48

Bild aus einem Input mit Javascript anzeigen?

Ich würde gerne, dass man eine Datei hochlädt und mit einem Button dann auf der Seite anzeigen lassen kann. Ich habe schon etwas rum probiert und es kommt immer nur " [object HTMLImageElement] " raus.

Mein Code ist dieser:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

        function anzeigen() {

            let bild = new Image();
            bild.src = document.getElementById("input");

            document.getElementById("bild").innerHTML = bild;

        }


    </script>
</head>
<body>
    <input type="file" accept="image/png, image/jpg" id="input">
    <input type="button" onclick="anzeigen();">
    <div id="bild">



    </div>
</body>
</html>

Das hochladen von Dateien funktioniert perfekt. Nur wird das Bild nicht angezeigt.

(Bin Anfänger)

Danke für eure Hilfe^^

...zur Frage

Hilfreichste Antwort

von HermCrafter

15.08.2021, 13:15

Hallo,

Hier ein kleines Beispiel:

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .hidden {display: none;}
        </style>
    </head>
    <body>
        <input type="file" accept="image/png, image/jpeg" id="input">
        <button type="button">Bild anzeigen</button>
        <div class="image hidden"></div>
        <script>
            const input = document.querySelector('#input');
            const image = document.querySelector('.image');
            input.addEventListener('change', e => {
                const file = input.files[0];
                if(file.type.match('image/*')) {
                    const fileReader = new FileReader();
                    fileReader.addEventListener('load', e => {
                        const img = document.createElement('img');
                        img.setAttribute('src', e.target.result);
                        image.appendChild(img);
                    });
                    fileReader.readAsDataURL(file);
                }
            });
            const button = document.querySelector('button');
            button.addEventListener('click', e => {
                image.classList.toggle('hidden');
            });
        </script>
    </body>
</html>

Für Rückfragen und eventuelle Unklarheiten stehe ich gerne zur Verfügung.

...zur Antwort