golf_backend/app/Views/profile.php

<style>
    /* profile pic */
body {
  font-family: sans-serif;
}

.profilepic {
  position: relative;
  /* width: 125px;
  height: 125px; */
  /* border-radius: 50%; */
  overflow: hidden;
  background-color: #fffff7;
}

.profilepic:hover .profilepic__content {
  opacity: 1;
}

.profilepic:hover .profilepic__image {
  opacity: .5;
}

.profilepic__image {
  object-fit: cover;
  opacity: 1;
  transition: opacity .2s ease-in-out;
}

.profilepic__content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: black;
  opacity: 0;
  transition: opacity .2s ease-in-out;
}

.profilepic__icon {
  color: white;
  padding-bottom: 8px;
}

.fas {
  font-size: 20px;
}

.profilepic__text {
  text-transform: uppercase;
  font-size: 12px;
  width: 50%;
  text-align: center;
}
</style>
</br></br>
<div class="row">
<div class="col-lg-12 col-xl-12">
    <div class="card text-center">
        <div class="card-body">

        <form id="form" data-parsley-validate class="form-horizontal form-label-left" method="post" action="" enctype="multipart/form-data">
        <input id="id" name="id" value="<?= $userList[0]['id'] ?>" type="hidden" />
                    <?php if ($userList[0]['profile'] == NULL) { ?>
                        <div class="profilepic"> 
                            <!-- <img style="width: 100%;height: 100%; display: block;" src="<?php echo base_url(); ?>/assets/uploads/profile_picture/profile.jpg" alt="Avatar" title="Change the avatar"> -->
                            <img src='<?php echo base_url()."/public/assets/images/users/avatar-1.jpg" ?>' class="rounded-circle avatar-xl img-thumbnail" alt="profile-image">
                            <input id="file_profile" name="profile" class="typeFile1" type="file" hidden/>
                            <div class="profilepic__content">
                              <span class="profilepic__icon"><i class="fa fa-camera" style="font-size:25px;color:black"></i></span>
                              <span class="profilepic__text"><b>Edit Profile</b></span>
                            </div>
                        </div>
                    <?php } 
                     else { ?>
                        <div class="profilepic"> 
                            <!-- <img style="width: 100%;height: 100%; display: block;" src="<?php echo base_url(); ?>/assets/uploads/profile_picture/profile.jpg" alt="Avatar" title="Change the avatar"> -->
                            <img src='<?php echo base_url()?>"/public/assets/images/users/<?php echo $userList[0]['profile'] ?>' class="rounded-circle avatar-xl img-thumbnail" alt="profile-image">
                            <input id="file_profile" name="profile" class="typeFile1" type="file" hidden/>
                            <div class="profilepic__content">
                              <span class="profilepic__icon"><i class="fa fa-camera" style="font-size:25px;color:black"></i></span>
                              <span class="profilepic__text"><b>Edit Profile</b></span>
                            </div>
                        </div>
                    <?php } ?>
        </form>

               <h4 class="mt-3 mb-0"><?= $userList[0]['name'] ?></h4>
               <div class="text-left mt-3">
                   <div class="table-responsive">
                       <table class="table table-borderless table-sm">
                           <tbody>
                               <tr>
                                   <th scope="row">Name :</th>
                                   <td class="text-muted"><?= $userList[0]['name'] ?></td>
                               </tr>
                               <tr>
                                   <th scope="row">Mobile :</th>
                                   <td class="text-muted"><?= $userList[0]['mobile'] ?></td>
                               </tr>
                               <tr>
                                   <th scope="row">Email :</th>
                                   <td class="text-muted"><?= $userList[0]['email'] ?></td>
                               </tr>
                               <tr>
                                    <th scope="row">Location :</th>
                                    <td class="text-muted"><?= $userList[0]['address'] ?> , <?= $userList[0]['city_name'] ?> , <?= $userList[0]['state_name'] ?> , <?= $userList[0]['country_name'] ?> - <?= $userList[0]['pincode'] ?></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div> <!-- end card-box -->
    </div> <!-- end col-->
</div>
<script>
// The handler is executed at most once per element per event type => one()
$(".profilepic").one('click',function() {
  $("#file_profile").trigger("click");
});

// change login person profile pic => file name : user/profile.php
$(document).ready(function(){
$("#file_profile").change(function(){
  $(".btn-success").click(); 
});
});

$(document).on('change','#file_profile',function(){
    var data = $("#form").serialize();
    $.ajax({ 
      type: "post",
      url: "<?php echo base_url();?>profilepic",
      data: data,
      json: true,
      success: function(response) {
        alert(response)
        if (response == true) {
           alert("dakug");
        } 
       
      },
      error: function(jqXHR, textStatus, err) { alert('text status '+textStatus+', err '+err) }
    });
});
</script>