Сразу конечно респект, тому кто сможет разобраться и решить вопросы. Подключение js файла присутствует. На прикрепленном фото показ того что при нажатии на круглую область можно выбрать своё фото для отображения на аве.
$(document).ready(function (e) {
let $uploadfile = $('#register.upload-profile-image input[type="file"]');
$uploadfile.change(function () {
readURL(this);
})
$("#reg-form").submit(function(event) {
let $password = $("#password");
let $password = $("#confirm_pwd");
let $password = $("#confirm_error");
if($password.val() === $confirm.val()){
return true;
}else{
$error.text("Password not Match");
event.preventDefault();
}
});
});
function readURL(input){
if(input.files && input.files[0]){
let reader = new FileReader();
reader.onload = function (e) {
$("#register.upload-profile-image.img").attr('src'. e.target.result);
$("#register.upload-profile-image.camera-icon").css({display:"none"});
}
reader.readAsDataURL(input.files[0]);
}
}
<?php
include('header.php');
?>
<!--registration area -->
<section id="register">
<div class="row m-0">
<div class="col-lg-4 offset-lg-2">
<div class="text-center pb-5">
<h1 class="login-title text-dark">Register</h1>
<p class="p-1 m-0 font-ubuntu text-black-50">Register</p>
<span> already have <a href="login.php">Login</a></span>
</div>
<div class="upload-profile-image d-flex justify-content-center pb-5">
<div class="text-center">
<div class="d-flex justify-content-center">
<img class="camera-icon avatar__icon" src="assets/photoapp.png" alt="camera">
</div>
<img src="assets/V633_ooo.png" style="width:200px; height:200px" class="img rounded-circle avatar__img" alt="profile">
<small class="form-text text-black-50">Choose Image</small>
<input type="file" class="form-control-file" name="profileUpload" id="upload-profile">
</div>
</div>
<div class="d-flex justify-content-center">
<form action="register.php" method="post" enctype="multipart/form-data" id="reg-form">
<div class="form-row">
<div class="col">
<input type="text" name="firstName" id="firstName" class="form-control" placeholder="firstName">
</div>
<div class="col">
<input type="text" name="LastName" id="LastName" class="form-control" placeholder="LastName">
</div>
</div>
<div class="form-row my-4">
<div class="col">
<input type="email" required name="email" id="email" class="form-control" placeholder="Email*">
</div>
</div>
<div class="form-row my-4">
<div class="col">
<input type="password" required name="password" id="password" class="form-control" placeholder="password*">
</div>
</div>
<div class="form-row my-4">
<div class="col">
<input type="password" required name="confirm_pwd" id="confirm_pwd" class="form-control" placeholder="Confirm Password*">
<small id="confirm_error" class="text-danger"></small>
</div>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" name="agreement" class="form-check-input" required>
<label for="agreement" class="form-check-label font-ubuntu text-black-50">I agree<a href="#"> term, conditions, and policy</a>(*)</label>
</div>
<div class="submit-btn text-center my-5">
<button type="submit" class="btn btn-warning rounded-pill text-dark px-5">Continue</button>
</div>
</div>
</div>
</section>
<!--#registration area -->
<?php
include('footer.php');
?>