Anzeige eines Bildes aus einem Input mit JavaScript

Um eine hochgeladene Datei in JavaScript anzuzeigen, musst du den Inhalt der Datei einlesen und dann als Bildquelle verwenden. Im folgenden Beispiel wird erklärt, ebenso wie du dies umsetzen kannst:

1. HTML Markup:
```html
<input type="file" id="input" accept="image/*">
<button id="button">Bild anzeigen</button>
<img id="image" src="#" alt="Bildvorschau">
```
Hier wird ein Input-Feld für den Dateiupload, ein Button zum Auslösen der Anzeige und ein leeres Bildelement erstellt.

2. JavaScript-Code:
```javascript
const input = document.querySelector('#input');
const button = document.querySelector('#button');
const image = document.querySelector('#image');

input.addEventListener('change', function(e) {
const file = input.files[0];
const fileReader = new FileReader();

fileReader.onload = function(e) {
image.src = e.target.result;
}

fileReader.readAsDataURL(file);
});

button.addEventListener('click', function(e) {
image.classList.toggle('hidden');
});
```
Hier wird zuerst das Input-Feld der Button und das Bildelement durch ihre IDs aus dem HTML-Markup ausgewählt. Dann werden Eventlistener für die Veränderungen im Input-Feld und den Button-Klick hinzugefügt.

3. Die Funktion `change` des Input-Feldes:
```javascript
input.addEventListener('change', function(e) {
const file = input.files[0];
const fileReader = new FileReader();

fileReader.onload = function(e) {
image.src = e.target.result;
}

fileReader.readAsDataURL(file);
});
```
Sobald eine Datei ausgewählt wurde, wird ihre Binärdatei mithilfe des FileReader-Objekts eingelesen und anschließend als Daten-URL in die `src` des Bildelements gesetzt. Dadurch wird das Bild direkt auf der Webseite angezeigt.

4. Die Funktion `click` des Buttons:
```javascript
button.addEventListener('click', function(e) {
image.classList.toggle('hidden');
});
```
Wenn der Button geklickt wird, wird die CSS-Klasse `hidden` auf dem Bildelement umgeschaltet. Dadurch kann das Bild ein- und ausgeblendet werden.

Mit diesem Code können Benutzer eine Datei hochladen und das Bild direkt auf der Webseite anzeigen lassen. Wenn du das Bild auf dem Server speichern möchtest, kannst du ein Server-Skript verwenden um die Datei zu empfangen und zu verarbeiten.