lima-city: Webhosting, Domains und Cloud
0 Pluspunkte 0 Minuspunkte

Wie kann ich dieses Formular inklusive dem Bild mit Javascript hochladen?

<form id="upload-form">
    <input type="file" id="image-input" accept="image/*">
    <button type="button" id="submit-button">Bild hochladen</button>
</form>

von  

1 Antwort

0 Pluspunkte 0 Minuspunkte

Du benötigst eine Möglichkeit, das ausgewählte Bild zu erfassen und an den Server zu senden. Dies kann mit Hilfe von XMLHttpRequest (XHR) oder Fetch API erreicht werden. Hier ist ein Beispiel mit der Javascript Fetch API.

document.addEventListener('DOMContentLoaded', function () {
    const submitButton = document.getElementById('submit-button');
    const imageInput = document.getElementById('image-input');

    submitButton.addEventListener('click', function () {
        const selectedFile = imageInput.files[0];

        if (selectedFile) {
            const formData = new FormData();
            formData.append('image', selectedFile);

            // Ersetze upload.php mit deinem serverseitigen Uploadscript
            fetch('upload.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                // Hier kannst du mit der Antwort des Servers umgehen
                console.log(data);
            })
            .catch(error => {
                console.error('Fehler beim Hochladen:', error);
            });
        } else {
            console.log('Bitte ein Bild auswählen.');
        }
    });
});
von (397 Punkte)  
Diese Community basiert auf dem Prinzip der Selbstregulierung. Beiträge werden von Nutzern erstellt, bewertet und verbessert – ganz ohne zentrale Moderation.

Wer hilfreiche Fragen stellt oder gute Antworten gibt, sammelt Punkte. Mit steigender Punktzahl erhalten Mitglieder automatisch mehr Rechte, zum Beispiel

  • Kommentare verfassen
  • Beiträge bewerten
  • Inhalte bearbeiten
  • Inhalte ausblenden

So entsteht eine Plattform, auf der sich Qualität durchsetzt – getragen von einer engagierten Gemeinschaft. Unser Ziel: Guter Inhalt. Für alle.

2.3k Fragen

2.8k Antworten

260 Kommentare

12 Nutzer