/CSS/Html input file upload image for profile picture

Html input file upload image for profile picture

#imageUpload
{
    display: none;
}

#profileImage
{
    cursor: pointer;
}

#profile-container {
    width: 150px;
    height: 150px;
    overflow: hidden;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

#profile-container img {
    width: 150px;
    height: 150px;
}

Source: stackoverflow.com

Html input file upload image for profile picture

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="profile-container">
   <image id="profileImage" src="http://lorempixel.com/100/100" />
</div>
<input id="imageUpload" type="file" 
       name="profile_photo" placeholder="Photo" required="" capture>

Source: stackoverflow.com

Html input file upload image for profile picture

$("#profileImage").click(function(e) {
    $("#imageUpload").click();
});

function fasterPreview( uploader ) {
    if ( uploader.files && uploader.files[0] ){
          $('#profileImage').attr('src', 
             window.URL.createObjectURL(uploader.files[0]) );
    }
}

$("#imageUpload").change(function(){
    fasterPreview( this );
});

Source: stackoverflow.com

Similar codes

0 vote363 views1 answer
Odoo search
CSS
0 vote398 views1 answer
Css bootstrap carousel fade how to add fade in up text
CSS
51 votes366 views6 answers
Css first element
CSS
59 votes357 views6 answers
Remove underline from link css
CSS
0 vote423 views1 answer
Background url with color css
CSS
2 votes356 views2 answers
Bootstrap icons in angular
CSS
1 vote349 views1 answer
Mysqli load result into array
CSS
0 vote624 views1 answer
Twig inline css
CSS
24 votes365 views4 answers
Use woff2 font in css
CSS
0 vote468 views2 answers
Zoom image on click css
CSS