1

quiero saber si alguien puede ayudarme a reemplazar en una etiqueta <span>, un fa icon con una imagen, al hacer click sobre el fa icon debe abrir el cuadro de dialogo para buscar en mi equipo cualquier imagen y se coloque sobre este o lo reemplace.

<body>
    <div class="contentarea">
        <section class="form_wrap">
            <section class="cantact_info">
                <section class="info_title">
                    <span class="fa fa-user-circle"></span>
                    <h4>FOTO</h4>
                </section>
            </section>
        </section>
    </div>
</body>

1 respuesta 1

2

Tan simple Como hacer esto:

<body>
    <input type="file" id="selectPicture" name="selectPicture">
    <div class="contentarea">
        <section class="form_wrap">
            <section class="cantact_info">
                <section class="info_title">
                    <label for="selectPicture"><span id="picture" class="fa fa-user-circle"></span></label>
                    <h4>FOTO</h4>
                </section>
            </section>
        </section>
    </div>
</body>
input[type=file] {
  left: -99999;
  display: none;
  visibility: hidden;
  position: absolute;
  z-index: -99999;
}
var input = document.getElementById("selectPicture");
input.addEventListener("change", function(e) {
  var picture = document.getElementById("picture");
  var image = new Image(100, 100);
  var reader = new FileReader();
  reader.onload = function(e) {
    image.src = e.target.result;
  };
  reader.readAsDataURL(e.target.files[0]);
  image.onload = function() {
    var newPicture = document.createElement('span');
    newPicture.id = "picture";
    newPicture.append(image);
    picture.parentNode.replaceChild(newPicture, picture);
  };
})
8
  • Excelente, funciona de maravilla. Solo hizo falta una comilla para cerrar en input[type="file] { pero ya quedo.
    – freshman
    Commented el 30 nov. 2019 a las 17:18
  • a que hace referencia el change en esta parte input.addEventListener("change", function(e) {, lo de la busqueda funciona pero al seleccionar una imagen jpg o png no veo que la reemplace, donde crees que esta el fallo?
    – freshman
    Commented el 30 nov. 2019 a las 17:59
  • lo he probado en chrome y firefox en mi equipo y aun así no me hace el cambio, creo que algo en mi código ha de estar afectado, te dejo un enlace solo para comprobar si se ejecuta correctamente en tu equipo de lo contrario seria el mio. drive.google.com/open?id=13XbC_97j8zmPjEes6g0VY-MOLeiowDz5 espero puedas indicarme si te funciona mi código.
    – freshman
    Commented el 30 nov. 2019 a las 23:56
  • jsbin.com/mivavufoqe/1/edit?html,css,js,output no encontré como cargar los fonts para que se vea a como lo tengo realmente
    – freshman
    Commented el 1 dic. 2019 a las 0:12
  • estas usando el mismo código que envié o modificaste algo? ya revise el ejemplo y si cambia la imagen en el tuyo
    – freshman
    Commented el 1 dic. 2019 a las 0:26

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.