"Untitled"
Bootstrap 4.1.1 Snippet by krunb

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* 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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/*------------------------------------
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');
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Black Dashboard

Questions / Comments: