profile Image Picture Preview
<---------------------------------- HTML ------------------------------->
<div class="container">
<div class="picture-container">
<div class="picture">
<img src="https://lh3.googleusercontent.com/LfmMVU71g-HKXTCP_QWlDOemmWg4Dn1rJjxeEsZKMNaQprgunDTtEuzmcwUBgupKQVTuP0vczT9bH32ywaF7h68mF-osUSBAeM6MxyhvJhG6HKZMTYjgEv3WkWCfLB7czfODidNQPdja99HMb4qhCY1uFS8X0OQOVGeuhdHy8ln7eyr-6MnkCcy64wl6S_S6ep9j7aJIIopZ9wxk7Iqm-gFjmBtg6KJVkBD0IA6BnS-XlIVpbqL5LYi62elCrbDgiaD6Oe8uluucbYeL1i9kgr4c1b_NBSNe6zFwj7vrju4Zdbax-GPHmiuirf2h86eKdRl7A5h8PXGrCDNIYMID-J7_KuHKqaM-I7W5yI00QDpG9x5q5xOQMgCy1bbu3St1paqt9KHrvNS_SCx-QJgBTOIWW6T0DHVlvV_9YF5UZpN7aV5a79xvN1Gdrc7spvSs82v6gta8AJHCgzNSWQw5QUR8EN_-cTPF6S-vifLa2KtRdRAV7q-CQvhMrbBCaEYY73bQcPZFd9XE7HIbHXwXYA=s200-no" class="picture-src" id="wizardPicturePreview" title="">
<input type="file" id="wizard-picture" class="">
</div>
<h6 class="">Choose Picture</h6>
</div>
</div>
<---------------------------------- JS ------------------------------->
$(document).ready(function(){
// Prepare the preview for profile picture
$("#wizard-picture").change(function(){
readURL(this);
});
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#wizardPicturePreview').attr('src', e.target.result).fadeIn('slow');
}
reader.readAsDataURL(input.files[0]);
}
}
<---------------------------------- CSS ------------------------------->
/*Profile Pic Start*/
.picture-container{
position: relative;
cursor: pointer;
text-align: center;
}
.picture{
width: 106px;
height: 106px;
background-color: #999999;
border: 4px solid #CCCCCC;
color: #FFFFFF;
border-radius: 50%;
margin: 0px auto;
overflow: hidden;
transition: all 0.2s;
-webkit-transition: all 0.2s;
}
.picture:hover{
border-color: #2ca8ff;
}
.content.ct-wizard-green .picture:hover{
border-color: #05ae0e;
}
.content.ct-wizard-blue .picture:hover{
border-color: #3472f7;
}
.content.ct-wizard-orange .picture:hover{
border-color: #ff9500;
}
.content.ct-wizard-red .picture:hover{
border-color: #ff3b30;
}
.picture input[type="file"] {
cursor: pointer;
display: block;
height: 100%;
left: 0;
opacity: 0 !important;
position: absolute;
top: 0;
width: 100%;
}
.picture-src{
width: 100%;
}
/*Profile Pic End*/