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 bl

Answer 1

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

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/