web-dev-qa-db-fra.com

Ajouter une image de profil sous forme en HTML et CSS

Je crée un formulaire dans lequel j'ai besoin d'une photo de profil de l'utilisateur et je veux que l'image soit sous forme de cercle ou de forme rectangulaire et par défaut, la zone d'image est une image noire ou fictive, et lorsque l'utilisateur clique sur la zone, il/elle est autorisée à choisir l'image. par exemple Profile Picture Uploader dans Facebook, Twitter.

Like This

Mon formulaire

[~ # ~] 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>  
</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/

javascriptjqueryhtmlcssuser-profile
6
Nakhhhh

Ce que vous pouvez faire est de masquer l'entrée et simplement agir comme si elle avait été cliquée lorsque l'image de profil est cliquée:

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

Aperçu d'image

Vous pouvez également donner à l'utilisateur un aperçu de l'image téléchargée:

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

Remarque sur l'efficacité: Vous pouvez le rendre plus efficace si vous utilisez createObjectURL au lieu de lire les données comme URL.

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

Comme vous pouvez le voir ici dans MDN , le URL.createObjectUrl générera simplement l'URL du fichier au lieu de le charger dans le DOM, ce qui est certainement préférable pour les gros fichiers.

Recadrage d'image circulaire

Pour afficher l'image recadrée dans un cercle, vous devrez lui donner un div extérieur et appliquer border-radius à lui:

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

Solution complète

Cet extrait de code rassemble les trois étapes:

$("#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>
12
Martin Zikmund
$("#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>
2
Mung Pham

Insérez la balise d'image séparément avec l'image par défaut, puis lisez l'URL tout en sélectionnant l'image via la balise d'entrée.

<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 ]
    });

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

1
Sarath Kumar