Dynamisch Bilder anzeigen

busgi · 28. Juni 2020

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?

Code

<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"/>

Code

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

JS

Code

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]);
};

Alles anzeigen

css

Code

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

würde mich auf vorschläge freuen

Sempervivum · 28. Juni 2020

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?

busgi · 28. Juni 2020

Sempervivum schrieb:

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.

Sempervivum · 28. Juni 2020

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.

busgi · 29. Juni 2020

Sempervivum schrieb:

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.

Sempervivum · 29. Juni 2020

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?

nextuser · 29. Juni 2020

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

busgi · 29. Juni 2020

Sempervivum schrieb:

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.

Sempervivum · 29. Juni 2020

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.

busgi · 2. Juli 2020

Sempervivum schrieb:

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.

nextuser schrieb:

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?

Sempervivum · 2. Juli 2020

Dann hast Du vermutlich immer noch ein Formular so dass der Button mit der id "i" ein Submit bewirkt, so dass die Seite neu geladen wird.

Mit diesem HTML funktioniert es bei mir:

Code

<input type="file" accept="image/*" name="file"><br>
<img id="output" />
<div class="wrapper">
<div class="my" id="myImage">
<h2>Your image here</h2>
</div>
</div>
<button id="i">Show It!</button>
<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

Dynamisch Bilder anzeigen

Ähnliche Themen

Dynamischer Slider

Tags