<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet"> <div class="container"> <div class="row justify-content-center"> <div class="col-md-4 py-5"> <div class="profile-user change_pic "> <div class="profile-user-pic"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRHfHdfcQ1cDWzgVLJr32Z3mVYq20D6pir7fKupEKB6fhvQWGZ5xVx76ydUx9nQJiJlKL0&usqp=CAU" id="profile-user-pic" alt=""> </div> <label for="change_pic" class="file-upload btn mb-0"> <i class="fa fa-pencil-alt"></i> </label> <button type="button" id="remove_pic" class="btn"><i class="fas fa-times"></i></button> </div> <input id="change_pic" type="file" class="d-none form-control" required> <div class="invalid-feedback"> الرجاء ارفاق صورة شخصية </div> </div> </div> </div>

/* change_pic */ .change_pic{ position: relative; width: 120px; height: 120px; margin: auto; border: none; } .change_pic .profile-user-pic{ width: 120px; height: 120px; border-radius: 5px; overflow: hidden; box-shadow: 0 0.5rem 1.5rem 0.5rem rgb(0 0 0 / 8%); } .change_pic img{ width: 100%; height: 100%; object-fit: cover; } .change_pic .btn{ position: absolute; top: -10px; right: -10px; padding: 0; width: 25px; height: 25px; min-height: 25px; line-height: 20px; font-size: 12px; border-radius: 50%; background: #fff; color: #3F4254; box-shadow: 0px 9px 16px 0px rgb(24 28 50 / 25%) } [ dir="rtl"] .change_pic .btn{ right: auto; left: -10px; } .change_pic #remove_pic{ top: auto; bottom: -15px; color: #fff; background: rgb(209 71 71) !important }

/*------------------------------------ Change Pic User From Profile ----------------------------------------*/ $('#remove_pic').hide(); function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#profile-user-pic').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#change_pic").change(function(){ if( $('#change_pic').val() != ""){ $('#remove_pic').show(); } else{ $('#remove_pic').hide(); } readURL(this); }); $('#remove_pic').click(function(){ $('#change_pic').val(''); $(this).hide(); $('#profile-user-pic').attr('src','https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRHfHdfcQ1cDWzgVLJr32Z3mVYq20D6pir7fKupEKB6fhvQWGZ5xVx76ydUx9nQJiJlKL0&usqp=CAU'); });