2

Tengo el siguiente código en el que deseo que los visitantes puedan cambiar el texto (ya lo hice) y que también puedan cambiar la imagen por defecto. No necesito que se puedan guardar los cambios, sé que si se refresca la página los cambios se pierden, esto no es problema.

¿Es posible hacer esto tal vez con un input type="file" oculto dentro de la imagen por defecto?

He visto páginas donde inclusive es posible copiar la imagen desde el PC y luego pegarla en el espacio por default sin más acciones.

Muchas gracias!

.profile-pic {
  display: block;
  margin: 0 auto;
  height: 300px;
  width: 300px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  background: url("https://academicos.uchilefau.cl/wp-content/uploads/2012/07/no_avatar15.jpg") center no-repeat;
  background-size: cover;
  max-width: 200px;
  max-height: 200px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container wrapper image-cropper">
  <div class="profile-pic"></div>
  <h1 contenteditable="true" maxlength="9" class="ngt text-uppercase mb-0 effect-shine" style="padding: 2rem 0;">NOMBRE</h1>
  <h3 contenteditable="true" class="font-weight-light mb-0" style="padding-bottom: 2rem;">Cargo</h3>
</div>

1 respuesta 1

0

Hay una forma que en javascript tendrias que subir el archivo temporalmente de la siguiente manera: En html tendrias que tener un parrafohasta que cargues la imagen y insertando una etiqueta IMG por javascript unicamente se subira al navegador no al servidor.

<form method="post" >
    <input type="file" onchange="preview(this)" />
</form>
<p id="prev"></p>

En el javascript tienes que tener una funcion la cual resiva el parametro que enviastes y usar el tipo files para leer el valor que contenga, despues verificar que sea una imagen si no lees la imagen y la cargas directamente al html insertandole a una etiqueta y al final leer en donde se encuentra el archivo dentro de tu disco duro todo esto se agrega de manera local ya que lo unico que hace es leer localmente y mostrarla en el navegador

 function preview(ruta)
{
    if(ruta.files && ruta.files[0])
    {
        if (ruta.files[0].type.match('image.*')) {
            var reader=new FileReader();
            reader.onload=function(ruta) {
                document.getElementById("prev").innerHTML="<img src='"+ruta.target.result+"'>";
            }
            reader.readAsDataURL(ruta.files[0]);
        }else{
            document.getElementById("prev").innerHTML="No es una imagen";
        }
    }
}

Espero que te funcione es algo viejo el codigo espero que te sirva yo te recomiendo que lo implementes la mejor manera de cambiar una imagen es hacerla invisible y agregar una imagen nueva

2
  • Gracias, cómo podría implementarlo a lo que ya tengo armado? La plantilla que tengo no se puede modificar por ordenes del cliente :3
    – user119165
    Commented el 6 mar. 2019 a las 12:30
  • Hola LauraZ podrias utilizar un metodo en un javascript que te detecte un clic en cierto componente, pero lo mas sano es avisarle a tu cliente que eso necesitas poner algo podrias usar una etiqueta a y abrir el cuadro de diaologo y pree mostrarla es el problema, si no tienes componente que te deje llamar el metodo no se como puedas hacerlo o en cierto caso podrias agregar con java script una etiqueta HTML Commented el 6 mar. 2019 a las 19:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.