Webseite: Kennt sich jemand damit aus?
Und zwar brauche ich kurz hilfe. Ich möchte dass man im Registrier-Formular ein Profilbild auswählen kann. Wenn man Angemeldet ist, soll das eigene PB oben rechts in der Ecke angezeigt werden.
HTML-Code (Formular):
<div class="container">
<div class="box">
<div class="scroll">
<form action="" method="POST" class="login-email">
<p class="login-text">Registrieren</p>
<div class="profile-pic-div">
<img src="img/default-pb.jpg" id="photo">
<input type="file" id="file">
<label for="file" id="uploadBtn">Profilbild Wählen</label>
</div>
<div class="input-group">
<input type="text" placeholder="Benutzername" name="username" value="<?php echo $username; ?>" required>
</div>
<div class="input-group">
<input type="email" placeholder="Email" name="email" value="<?php echo $email; ?>" required>
</div>
<div class="input-group">
<input type="password" placeholder="Passwort" name="password" value="<?php echo $_POST['password']; ?>" required>
</div>
<div class="input-group">
<input type="password" placeholder="Wiederhole das Passwort" name="cpassword" value="<?php echo $_POST['cpassword']; ?>" required>
</div>
<div class="input-group">
<button name="submit" class="login-btn">Registrieren</button>
</div>
<p class="login-register-text">Du hast bereits ein Konto? <a href="https://www.klexxstube.com/anmelden">Melde dich an</a></p>
</form>
</div>
</div>
</div>
Hier der Code zum Wechseln vom PB (JS):
const imgDiv = document.querySelector('.profile-pic-div');
const img = document.querySelector('#photo');
const file = document.querySelector('#file');
file.addEventListener('change', function() {
const choosedFile = this.files[0];
if (choosedFile) {
const reader = new FileReader();
reader.addEventListener('load', function() {
img.setAttribute('src', reader.result);
});
reader.readAsDataURL(choosedFile);
}
});
Vielleicht habt ihr auch eine komplett andere Version wie man so etwas schaffen kann.
LG Klexxsy
1 Antwort
Zuerst zu zwei Markupfehlern:
1) Das action-Attribut des Formulars erwartet eine valide URI. Entweder also, du gibst eine an oder für deinen Fall passender, du lässt das Attribut komplett weg. Der Browser wird daraufhin die aktuelle URL als Zieladresse verwenden.
<form method="POST" class="login-email">
2) Deinem img-Element fehlt ein beschreibender Text (alt-Attribut). Bedenke, dass nicht jeder Seitenbesucher Bilder sehen kann.
<img alt="Profilbildvorschau" src="img/default-pb.jpg" id="photo">
Zum Profilbildwechsel:
Dein aktueller Code sorgt bisher ja nur für eine Vorschau des ausgewählten Bildes. Du brauchst aber ein persistente Speicherung, damit das Bild auch über mehrere Requests hinweg an den Account gebunden ist. An sich ist es nicht so anders, als würdest du nur den Nutzernamen speichern und anzeigen.
- Du musst das Bild auf den Webserver laden.
- Das Bild muss eine Verknüpfung zum Account erhalten.
- Für angemeldete Nutzer wird das Bild gesucht und geladen.
Bei Schritt 1 hilft dir das Tutorial von W3Schools: PHP File Upload. Bau auf jeden Fall serverseitige Filter ein, die mehrere Informationen prüfen: Dateiendung, MIME-Type, Dateigröße, ... auch clientseitig kannst du bereits erste (zusätzliche) Validationen vornehmen. So gibt es für das input-Element das accept-Attribut, in dem du konkrete MIME-Typen auflisten kannst, die erlaubt sind.
Beispiel:
<input accept="image/png,image/jpeg" name="..." type="file">
Fasse es nicht mit image/* zusammen, sondern mache dir die Mühe, die Typen einzeln aufzulisten. Denn einen TIFF-Upload (als Beispiel) willst du ganz sicher nicht.
Mit JavaScript kann man die Dateigröße prüfen:
const maxAllowedBytes = // some max size ...
// inside change event handler:
if (maxAllowedBytes < chosenFile.size) {
// error ...
}
Hierzu als beiläufiger Kommentar: Die passive Form von choose ist is chosen.
Als Speicherort auf dem Webserver wäre ein extra Verzeichnis sinnvoll, welches nur über eingeschränkte Rechte verfügt. Die Bilder sollten unter einem anderen Namen als die Quelldatei gespeichert werden und ein Entfernen aller EXIF-Daten wäre noch ganz nett. Zu Letztgenannten findest du hier verschiedene Lösungsansätze.
Den Pfad zum Bild speicherst du in der Datenbank, in der du sicherlich ebenso schon die anderen Accountdaten ablegst.
Wenn sich ein Nutzer anmeldet, kannst du seine Profildaten aus der Datenbank lesen. Dazu gehört der gespeicherte Bildpfad. Für das HTML Template ist der Rest einfach:
<?php
// load user data ...
$profilePicturePath = empty($user->profilePicturePath)
? "path/to/default/image"
: $user->profilePicturePath;
?>
<img alt="Profilbild <?= $user->name ?>" src="<?= $profilePicturePath ?>">
In meinem Beispiel würde ich davon ausgehen, dass es eine Klasse gibt, die einen Nutzer beschreibt. Die Nutzerdaten des aktuellen Nutzers werden demzufolge in ein Objekt dieser Klasse geschrieben ($user).
Wenn kein Profilbild vorliegt, wird das Standardbild genommen.
Innerhalb des HTMLs bevorzuge ich übrigens die Shorttags
<?= ... ?>
gegenüber der Langform:
<?php echo "..." ?>
Stimmt, bei dem Profilbild im Metamenü (oder wo auch immer es bei eingeloggten Nutzern angezeigt wird) wäre es eigentlich ein dekoratives Element.
Bezüglich der Profilbildvorschau wäre es vielleicht eine bessere Alternative, einen Text neben das Bild zu setzen.
Vorschau: <img alt src="...">
bei dem Profilbild im Metamenü (oder wo auch immer es bei eingeloggten Nutzern angezeigt wird) wäre es eigentlich ein dekoratives Element.
Wenn ich nochmal darüber nachdenke, stimme ich doch Deiner ersten Lösung zu. Denn ein rein dekoratives Element ist das ja eben nicht? Schließlich dient dieses Profilbild dazu, zu erkennen, mit welchem Usernamen ich eingeloggt bin. Ist ja nicht unrealistisch, mehrere Accounts zu haben.
Daher halte ich
<img alt="Du bist angemeldet als User <?= $user->name ?>" ...>
in diesem Falle für die richtige Lösung. Ebenso wie:
Vorschau: <img alt src="...">
Wenn ich
<form action="index.php (Startseite)">
angebe, da muss auch der PHP-Code von der Registrierung in der index.php-Datei stehen oder?
Korrekt.
<klugscheiss>
Aber "Profilbildvorschau" oder auch "Profilbild von Otto Müller" ist dafür der falsche Text. Das wäre der richtige Text für das title-Attribut. Das alt-Attribut soll einen beschreibenden Charakter haben. Für ein Profilbild wäre das z. B. "Zeichnung eines jungen Mannes mit schwarzem T-Shirt". Da das im Falle eines Profilbildes kaum sinnvoll umsetzbar ist, ist hier die Angabe alt="" die passende. Zumal das Bild keine semantische oder funktionale Bedeutung hat.
</klugscheiss>