Saltar al contenido

ejemplo de código css html de carga de imagen de perfil

Hola, tenemos la solución a tu pregunta, has scroll y la verás un poco más abajo.

Ejemplo 1: agregar una imagen de perfil a un formulario en html y css

<divclass="signup-w3ls"><divclass="signup-agile1"><formaction="#"method="post"><divclass="form-control"><labelclass="header">Profile Photo:label><inputid="image"type="file"name="profile_photo"placeholder="Photo"required=""capture>div><divclass="form-control"><labelclass="header">Store Name :label><inputtype="text"id="store_name"name="store_name"placeholder="Store Name"title="Please enter your First Name"required="">div><divclass="form-control"><labelclass="header">Store Type :label><inputtype="text"id="store_type"name="store_type"placeholder="Store Type"title="Please enter your Last Name"required="">div><divclass="form-control"><labelclass="header">Owner Type :label><inputtype="text"id="owner_type"name="owner_type"placeholder="Owner Type"title="Please enter a valid email"required="">div><divclass="form-control"><labelclass="header">Website :label><inputtype="url"id="website"name="website"placeholder="Website"id="password1"required="">div><divclass="form-control"><labelclass="header">Contact Number :label><inputtype="text"id="contact_number"name="contact_number"placeholder="Contact Number"required="">div><divclass="form-control"><labelclass="header">Contact Email :label><inputtype="email"id="contact_email"name="contact_email"placeholder="Contact Email"required="">div><inputtype="submit"class="register"value="Register">form>div>div>

Ejemplo 2: imagen de carga de archivo de entrada html para foto de perfil

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

Ejemplo 3: imagen de carga de archivo de entrada html para foto de perfil

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

Agradecemos que quieras añadir valor a nuestra información colaborando tu experiencia en las interpretaciones.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *