Add a Profile Picture in form in HTML and CSS

Question

I am creating a form in which I need a Profile picture of the user and I want that the picture is in a circle or a ectangular form. By default the area of image should be black or a dummy picture. When the user clicks on the area then he/she is allowed to select an image, just like the profile picture upload in Facebook or Twitter.

My Form

HTML

<div class="signup-w3ls">
    <div class="signup-agile1">
        <form action="#" method="post">
        
            <div class="form-control">
                <label class="header">Profile Photo:</label>
                
                <input id="image" type="file" name="profile_photo" placeholder="Photo" required="" capture>
            </div>
            
            <div class="form-control">
                <label class="header">Store Name :</label>
                <input type="text" id="store_name" name="store_name" placeholder="Store Name" title="Please enter your First Name" required="">
            </div>
            
            <div class="form-control">
                <label class="header">Store Type :</label>
                <input type="text" id="store_type" name="store_type" placeholder="Store Type" title="Please enter your Last Name" required="">
            </div>

            <div class="form-control">
                <label class="header">Owner Type :</label>
                <input type="text" id="owner_type" name="owner_type" placeholder="Owner Type" title="Please enter a valid email" required="">
            </div>

            <div class="form-control">
                <label class="header">Website :</label>
                <input type="url" id="website" name="website" placeholder="Website" id="password1" required="">
            </div>

            <div class="form-control">
                <label class="header">Contact Number :</label>
                <input type="text" id="contact_number" name="contact_number" placeholder="Contact Number" required="">
            </div>

            <div class="form-control">
                <label class="header">Contact Email :</label>
                <input type="email" id="contact_email" name="contact_email" placeholder="Contact Email" required="">
            </div>
            
            <input type="submit" class="register" value="Register">

        </form>
    </div>
</div>

CSS

.signup-w3ls {
    width: 50%;
    margin: 70px 25% 80%;
    padding: 0;
    display: table;
    position: relative;
}
.signup-agile1{
    width:100%;
    float:center;
}

.signup-w3ls .signup-agile1 .form-control {
    margin-bottom: 20px;
}
label.header {
    font-size: 16px;
    font-weight: 500;
    width: 215px;
    color: grey;
    margin-right:10px;
    text-align:justify;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: inline-block;
    font-family: 'Nunito', sans-serif;
}
input#image,input#store_name, input#store_type,input#owner_type, input#website,input#contact_number,input#contact_email {
    padding:0 40px;
    width:40%;
    height:55px;
    border: 1px solid #dadada;
    color: grey;
    text-align:justify;
    outline: none;
    letter-spacing: 1px;
    font-size: 16px;
    font-weight:normal;
    font-family: 'Muli', sans-serif;
    border-radius:30px;
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    -o-border-radius:30px;
    -ms-border-radius:30px; 
}
input#image:focus,input#store_name:focus, input#store_type:focus,input#owner_type:focus, input#website:focus,input#contact_number:focus,input#contact_email:focus  {
    background-color:#f5f8fa !important;
    border:1px solid #dadada;
}
input::-webkit-input-placeholder {
color: grey;
} 
input:-moz-placeholder { /* Firefox 18- */
color: grey;  
} 
input::-moz-placeholder {  /* Firefox 19+ */
color: grey;  
} 
input:-ms-input-placeholder {  
color: grey;  
}
.register {
    background-color: lightgreen;
    width: 52%;
    height: 55px;
    border: none;
    margin-left: 233px;
    cursor: pointer;
    color: #fff;
    outline: none;
    font-size: 20px;
    font-weight: normal;
    text-transform: uppercase;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -o-border-radius: 30px;
    -ms-border-radius: 30px;
    font-family: 'Muli', sans-serif;
}   
.register:hover {
    background-color:#36b051;
    color:#fff;
}

JSFIDDLE:- https://jsfiddle.net/7ao1qxLe/

you'll have to research the twitter/facebook APIs and figure out how exactly to do that -- its a multi-step process that cant be answered in a single thought — mike510a, Dec 31 '16 at 07:57
no i just give u example of twitter and facebook, i want the image uploader — Nakhhhh, Dec 31 '16 at 07:59
That is also a multi-step process -- you'll need to have a back-end implementation using PHP or some other server-side language to store the photo ... which will have to be submitted to the backend via either a FORM or via `ajax` first, then you'll also probably need a `database` to store all the different user profiles — mike510a, Dec 31 '16 at 08:01
yes, but brother i need only design, i am php and mysql expert — Nakhhhh, Dec 31 '16 at 08:02
so, i say that can u help me to give me design of only profile uploader — Nakhhhh, Dec 31 '16 at 08:03
i am working on project in which the requirement is this, and i am not able to create it, so here i am to get some tips — Nakhhhh, Dec 31 '16 at 08:04
Can you be more specific? Maybe add a sentence that has a `question` to the end of your post so we know what your asking? stackoverflow is a `question` and `answer` about coding service, not a `code writing` service :) — mike510a, Dec 31 '16 at 08:05

Martin Zikmund · Accepted Answer · 2016-12-31T09:02:50.803

What you can do is to hide the input and just act as if it was clicked when the profile image is clicked:

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

#imageUpload
{
    display: none;
}

#profileImage
{
    cursor: pointer;
}

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

Image preview

You can also give the user a preview of the uploaded image:

function previewProfileImage( uploader ) {   
    //ensure a file was selected 
    if (uploader.files && uploader.files[0]) {
        var imageFile = uploader.files[0];
        var reader = new FileReader();    
        reader.onload = function (e) {
            //set the image data as source
            $('#profileImage').attr('src', e.target.result);
        }    
        reader.readAsDataURL( imageFile );
    }
}

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

Efficiency note: You can make it more efficient if you use createObjectURL instead of reading data as URL.

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

As you can see here in MDN, the URL.createObjectUrl will just generate the URL for the file instead of having to load it into the DOM, which is definitely preferable for large files.

Circular image crop

To display the image cropped in a circle, you will need to give it an outer div and apply border-radius to it:

HTML:

<div id="profile-container">
   <image id="profileImage" src="aDefaultImage.png" />
</div>

CSS:

#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%;
}

Complete solution

This snippet puts together all three steps:

$("#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 );
});

#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;
}

<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>

brother, it is showing me default picture but it can't show me dialogue window, in which i can select picture — Nakhhhh, Dec 31 '16 at 08:51
after selection of image, the image is remain same, a default image — Nakhhhh, Dec 31 '16 at 09:01
Try the complete solution I have just added to my answer. The first snippet is only for the file upload triggering. The final solution contains the preview. — Martin Zikmund, Dec 31 '16 at 09:03
Excellent code.. just used on my site and works flawlessly !! — Durairaj Veera Sinnaiah, Jun 19 '20 at 14:41

score 3 · Answer 2 · answered May 21 '17 at 03:17

$("#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 );
});

#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;
}

<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>

Sarath Kumar · Answer 3 · 2016-12-31T09:17:01.103

Insert Image tag separately with default image then read the URL while selecting image through input tag.

<img id="profile" src="default.png" alt="profile-image" />

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            
            reader.onload = function (e) {
                $('#profile').attr('src', e.target.result);
            }
            
            reader.readAsDataURL(input.files[0]);
        }
    }
    
    $("#image").change(function(){
        readURL(this);
        //other uploading proccess [server side by ajax and form-data ]
    });

Fiddle Link: https://jsfiddle.net/7ao1qxLe/1/

score 0 · Answer 4 · answered Sep 09 '20 at 13:09

You can use the below code to apply this picture selector

<img id="idcardfront" src="images/UploadImgPlaceholder.png" data-type="editable" />
<script>
$("#idcardfront").each(function (i, e) {
var _inputFile = $('<input/>')
.attr('type', 'file')
.attr('hidden', 'hidden')
.attr('id', 'idCardFrontFile')
.attr('onchange', 'readImage()')
.attr('data-image-placeholder', e.id)
.attr('Class', 'hidden');
 $(e.parentElement).append(_inputFile);
 $(e).on("click", _inputFile, triggerClick);
 });
</script>

Add a Profile Picture in form in HTML and CSS

4 Answers4

Image preview

Circular image crop

Complete solution

Linked