Dynamisch Bilder anzeigen

Hallo Zusammen,

ich versuche in einem div, dynamisch Bilder anzuzeigen. Nur leider ist es so, dass die Bilder kurz erscheinen und dann wieder verschwinden.

Ich habe auch den css-Code überarbeitet und den div aug height:auto, width: auto gestellt. Leider will es trotzdem nicht funktionieren. Habe ich vielleicht im javascript code, irgendwelche fehler?

<form method="" action="">
                        <input type="file" accept="image/*" onchange="loadFile(event)" onchange="onFileSelected(event)" name="file"><br>
                        <img id="output"/>

                        <input type="submit" value="Upload Photo" id="i"/>

<div class="wrapper">
            <div class= "my" id="myImage">
                <h2>Your image here</h2>
            </div>
        </div>

JS

var loadFile = function(event) {
var reader = new FileReader();
var output2 = document.getElementById('myImage');
reader.onload = function(){
var output = document.getElementById('output');
output.src = reader.result;
output.style.height = "100px";
output.style.width = "auto";
document.getElementById('i').onclick = () => {    //id = i, ist ein Button zum Hochladen
  myFunction();
}
function myFunction(){
  output2.innerHTML += '<img src="' + reader.result + '">';
};
};
reader.readAsDataURL(event.target.files[0]);
};

css

#myImage{
    height: auto;
    width: auto;
    display: flex;
    overflow: auto;
}

würde mich auf vorschläge freuen

Zitat von Sempervivum

Leider finde ich den Button in deinem HTML nicht und mir ist auch nicht klar, wozu die beiden Outputs dienen - offenbar wird darin das selbe Bild angezeigt. Kannst Du das vielleicht erklären?

Ich habe den HTML_teil mal editiert. jetzt müsstest du die ID für den Button sehen.

Die beiden outputs sind genau das gleiche bild. output ist das bild im Modal in einer kleineren version.

output2 ist das gleiche bild, welches ins div hinzugefügt werden soll. Das versuche ich mit innerHTML zu lösen.

Zitat von Sempervivum

Ich denke, dann ist die Sache klar: Dein input#i hat den Typ "submit", das bewirkt, dass beim Klicken das Formular abgeschickt wird. D. h. die Seite wird neu geladen, da Du keine Action angegeben hast. Da Du das Bild ja hochladen willst, kannst Du auf das Abschicken auch nicht verzichten. Ich sehe da zwei Möglichkeiten:

1. Du akzeptierst, dass das Bild nur nach dem Auswählen der Datei sichtbar ist und nach dem Abschicken des Formulars und Hochladen wieder verschwindet.

2. Du lädst das Bild mit Ajax hoch, dann wird die Seite nicht neu geladen und die Vorschau verschwindet nicht.

Oder, möglicher Weise, wenn du nach dem Hochladen die URL auf dem Server kennst:

3. Diese URL als src in das img-Tag eintragen, dann würde das Bild ebenfalls angezeigt werden.

Leider darf ich Ajax nicht benutzen.

zu 3.

(output2.innerHTML += '<img src="' + reader.result + '">';)

hier versuche ich ja die src als img- tag einzutragen und ich denke, dass es auch so richtig ist (da es dynmaisch ausgewählt wird). gibt es denn irgendwelche alternativen? Ich möchte nämlich nicht, dass es <img src ="bild.png" > heißen soll. das bild soll ja vom benutzer ausgewählt werden.

zu 1.

das habe ich gar nicht so gesehen. jetzt ergibt es auch ein sinn, warum es nach ein paar sekunden verschwindet.

Zitat von Sempervivum

Mal sehen, vielleicht verstehe ich da jetzt etwas falsch: Weil Du bei dem Button schreibst "Button zum Hochladen" und weil ich den Fileinput bisher nur zum Hochladen von Dateien verwendet habe, bin ich davon ausgegangen, dass Du die Bilder jeweils auf den Server hochladen willst. Trifft das überhaupt zu oder willst Du die Bilder nur in dem div anzeigen?

genau. ich will das bild nur im div anzeigen lassen.

Zitat von Sempervivum

Das macht das Ganze natürlich viel einfacher, Du brauchst dann kein Formular und kein Ajax. Ich habe das Ganze mal etwas gestrafft:

Code

    <script>
        const output = document.getElementById('output');
        const output2 = document.getElementById('myImage');
        const fileInput = document.querySelector('input[name="file"]');
        const showBtn = document.querySelector('#i');
        const reader = new FileReader();
        fileInput.addEventListener('change', (event) => {
            reader.onload = () => {
                output.src = reader.result;
                output.style.height = "100px";
                output.style.width = "auto";
            };
            reader.readAsDataURL(event.target.files[0]);
        });
        showBtn.addEventListener('click', (event) => {
            output2.innerHTML += '<img src="' + reader.result + '">';
        });
    </script>

Alles anzeigen

So wird das Bild zum Container jeweils hinzugefügt weil Du beim innerHTML += verwendest. Wenn Du dagegen immer nur das letzte Bild anzeigen willst, kannst Du es auch so machen, wie von nextuser empfohlen.

Zitat von nextuser

Du kannst den img-Tag auch einfach im div belassen und mit JS dann nur die Quelle (Bildelement.src = "...") verändern, anstatt innerHTML.

Hallo. Vielen Dank für die Tipps. Ich war die letzten Tage arbeiten und hatte keine Zeit euch zu antworten.

Leider klappen beide Varianten nicht. Ich habe den Code übernommen und das Bild wird trotzdem nur eine Sekunde angezeigt, verschwindet im Anschluss wieder.

Ich weiß nicht. Ich bin einfach deprimiert momentan. Nichts will klappen.

Ich glaube, die Bilder als Preview im Modal anzeigen zu lassen und die Originalgröße im Div anzeigen zu lassen, ist keine gute Idee.

Habt ihr andere Tipps, wie ich ausgewählte Bilder in einem Div anzeigen kann?