Formular Upload mit Javascript

Question

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>

Answer 1

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.');
        }
    });
});