Wie richtet man auf einer Website das Hochladen von Bildern ein?
Antwort vom**Du brauchst auf der Seite ein HTML-Formular mit einem Datei-Feld; nur damit kann ein Nutzer ein Bild auswählen und hochladen.** ## Das Grundprinzip Ein Bild-Upload besteht immer aus 2 Teilen: 1. **Im Frontend** ein Eingabefeld vom Typ `file` 2. **Im Backend** ein Script, das die Datei annimmt, prüft und speichert Nur das HTML-Feld allein reicht also nicht. Ohne Server-Verarbeitung wird kein Bild dauerhaft hochgeladen. ## Einfaches Beispiel ```html <form action="upload.php" method="post" enctype="multipart/form-data"> <label for="bild">Bild auswählen:</label> <input type="file" name="bild" id="bild" accept="image/*"> <button type="submit">Hochladen</button> </form> ``` Entscheidend ist `enctype="multipart/form-data"`. Ohne das wird die Datei nicht korrekt übertragen. ## Was das macht - `type="file"` zeigt den Datei-Auswähler - `accept="image/*"` erlaubt nur Bilddateien zur Auswahl - `method="post"` sendet die Datei an den Server - `action="upload.php"` legt fest, welche Datei den Upload verarbeitet ## Einfaches PHP-Beispiel Wenn deine Seite mit PHP läuft, kann die Verarbeitung so aussehen: ```php <?php $zielOrdner = "uploads/"; $datei = $zielOrdner . basename($_FILES["bild"]["name"]); if (move_uploaded_file($_FILES["bild"]["tmp_name"], $datei)) { echo "Bild wurde hochgeladen."; } else { echo "Upload fehlgeschlagen."; } > ``` ## Wichtiger Unterschied Viele machen den Fehler und bauen nur das Datei-Feld ein. Dann **sieht** der Upload zwar fertig aus, aber das Bild landet nirgends. Erst das Backend speichert die Datei wirklich. ## Praxis-Tipp Lass nicht einfach jede Datei zu. Prüfe mindestens: - Dateityp - Dateigröße - erlaubte Endungen - sicheren Dateinamen Sonst öffnest du dir schnell ein Sicherheitsproblem. ## Wenn du nur eine ganz einfache Lösung willst Dann ist das hier das Minimum: ```html <input type="file" accept="image/*"> ``` Das zeigt aber nur die Auswahl an. **Hochladen** kann der Nutzer damit noch nicht, solange kein Formular und kein Server-Script dahinter steckt.