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
