Pregunta:

Fecha: 07-05-2018 16:07:19 (En Español)

Mostrar una imagen en lugar de <input type"file">[Resuelta]

Quiero colocar en mi sitio el: Cambiar Imagen
Pero lo quiero hacer con una imagen en el lado izquierdo con forma de cámara, es el mismo estilo que tenemos en esta misma pagina en el perfil de usuario.

si van a su perfil en esta pagina verán que en lo que yo quiero hacer.

Saludos Etiquetas: CSS - HTML - Pregunta Votos: 0 - Respuestas: 7 - Vistas: 19 Compartir en: Google Facebook Twitter LinkedIn Link

Respuestas:

4

Walter Sánchez Karma: 6576
Fecha: 07-05-2018 18:48:56
Hola Braylin

Te dejo un codigo para que puedas experimentar.
CSS:
```
.image-upload > input
{
    display: none;
}

.image-upload img
{
    width: 30px;
    cursor: pointer;
}
}
```
HTML:
```
<div>Click en la imagen para subir el archivo.</div>

<div class="image-upload">
    <label for="file-input">
        <img src="http://files.softicons.com/download/toolbar-icons/mono-general-icons-3-by-custom-icon-design/png/256x256/camera.png" alt ="Click aquí para subir tu foto" title ="Click aquí para subir tu foto" > 
    </label>

        <input id="file-input" name="foto" type="file"/>
</div>
```
Al <input id="file-input" name="foto" type="file"/> puedes agregarle el atributo accept

Por ejemplo:
<input id="file-input" type="file" name="foto" accept="image/*" /> Sólo muestran los archivos de imágenes.
<input id="file-input" type="file" name="foto" accept="image/x-png,image/jpeg" /> Sólo muestran los archivos de imágenes de tipo png o jpeg.

Recomendación: deberás chequear del lado del servidor con PHP que el archivo que se intenta subir sea una imagen y no cualquier otro tipo de archivo.

Espero que te sirva

Saludos
Votos: 4 - Link respuesta
-2

Braylin Payano Karma: 1227

Fecha: 07-05-2018 19:44:58 Walter, olvide mencionar en mi pregunta al que quiero

Quiero que cuando le de a seleccionar foto de perfil, quiero que no aya ningún botón, simplemente que al seleccionar la imagen y abrirla en el archivo se actulize mi foto de perfil

Mucha gracias por tu ayuda. Votos: -2 - Link respuesta
1

Walter Sánchez Karma: 6576

Fecha: 07-05-2018 20:20:36 Braylin en el codigo que expuse el botón está oculto, se muestra una imagen que actúa como el botón que al hacer click sobre ella se abre la ventana para seleccionar el archivo para subir.

Aqui veras el codigo en acción.

Es una imagen
tal imagen la puedes reemplazar por la foto de perfil por ejemplo. Una vez subida al servidor lo que debes hacer es hacer submit para enviarlo al servidor y recargar la pagina donde debería mostrar la nueva imagen.

Saludos Votos: 1 - Link respuesta

Walter Sánchez Karma: 6576

Fecha: 07-05-2018 22:32:26 Braylin te dejo un codigo que hice a ultimo momento quizás no sea el mas ideal, es solo a modo ilustrativo.

index.php

<?php
$target_path = "uploads/"; // Directorio donde estan las fotos
$photo_default = "default.png"; // Foto por defecto

// Si no se ha subido la imagen se establece una foto por defecto
// es compuesto por el directorio de fotos y la foto por defecto. ej: uploads/default.png
$profile_photo = $target_path.$photo_default;

// $profile_photo = $target_path.basename( $_FILES['uploadedfile']['name']);

if ( isset( $_FILES["uploadedfile"] ) && !empty( $_FILES["uploadedfile"]["name"] ) ) {
    //se ha cargado una foto
    $target_path = $target_path . basename( $_FILES['uploadedfile']['name']);
    if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) {
        // Se subio la imagen y se establece la foto  para mostrar con su ruta
        $profile_photo = $target_path ;
    }
}
?>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Perfil</title>
    <style>
        .image-upload > input{
            display: none;
        }

        .image-upload img{
            width: 130px;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        window.onload = function() {
            document.getElementById("file-input").onchange = function() {
                document.getElementById("form").submit();
            }
        }
    </script>
</head>
<body>
<form id="form" action="index.php" method="post" enctype="multipart/form-data">
    <div class="image-upload">
        <label for="file-input">
            <img src="<?php echo $profile_photo ?>" alt ="Click aquí para subir tu foto" title ="Click aquí para subir tu foto" />
        </label>

        <input id="file-input" type="file" name="uploadedfile"/>
    </div>
</form>
</body>
</html>

Archivo: default.png que está guardado en el directorio uploads donde estarían todas las fotos cargadas.

Cuando inicia la página se establece una imagen por defecto default.png que podría ser la foto que estaba previamente establecida por el usuario.
Al hacer click en dicha imagen se abre la ventana para cargar una nueva foto y al seleccionarla se guarda en el directorio uploads y muestra la imagen cargada.
Si se hace click nuevamente sobre la foto vuelve a abrir la ventana para cargar la foto.

Código por separado para que lo puedas entender mejor.

index.php

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Perfil</title>
    <style>
        .image-upload > input{
            display: none;
        }

        .image-upload img{
            width: 130px;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        window.onload = function() {
            document.getElementById("file-input").onchange = function() {
                document.getElementById("form").submit();
            }
        }
    </script>
</head>
<body>
<form id="form" action="subir_foto.php" method="post" enctype="multipart/form-data">
    <div class="image-upload">
        <label for="file-input">
            <img src="https://s3.amazonaws.com/quinielac/icon-user-default.png" alt ="Click aquí para subir tu foto" title ="Click aquí para subir tu foto" >
        </label>

        <input id="file-input" type="file" name="uploadedfile"/>
    </div>
</form>
</body>
</html>

subir_foto.php

<?php
$target_path = "uploads/";
$target_path = $target_path . basename( $_FILES['uploadedfile']['name']);
if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) {
    echo "El archivo ". basename( $_FILES['uploadedfile']['name']). " ha sido subido";
} else{
    echo "Ha ocurrido un error, trate de nuevo!";
}

Faltaria validar en el codigo de PHP que el archivo cargado sea una imagen.

Espero que sea lo que andas buscando

Saludos Votos: 3 - Link respuesta

0

Braylin Payano Karma: 1227

Fecha: 24-06-2018 14:52:12 He logrado resorber mi problema con este video tutorial

personalizar input type file

Votos: 0 - Link respuesta
0

Braylin Payano Karma: 1227

Fecha: 24-06-2018 14:53:57 Gracias Walter por su ayuda, lo he logrado tambien gracias a usted Votos: 0 - Link respuesta
0

Kengya Moncada Karma: 1
Fecha: 24-06-2022 07:37:28
Hola tambien puedes agregar esta propiedad dentro del src de la ruta de la imagen: detallo un pequeño ejemplo:

<div class="profile-avatar">
@if($user && $user->image)
<img id="output" class="rounded-circle output mb-2"
src="{{strtolower($user->image)}}"
>
@else
<img id="output" src="{!! asset('/img/default_profile.png') !!}" alt="Avatar"
class="rounded-circle output mb-2">
@endif

</div>
Votos: 0 - Link respuesta

Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión

frjcbbae garagebible.com

Pregunta:

Mostrar una imagen en lugar de <input type"file">[Resuelta]

Respuestas:

personalizar input type file

secciones

La comunidad

Mi Cuenta