4

¿Cómo puedo mostrar una imagen en un img seleccionando el archivo con un input type file?

<img id="img1" src="" height="100px" width="100px" border="solid 1px">
    <input id="inputFile1" type="file">

    <script>
        window.addEventListener('load', init, false);

        function init() {
            var inputFile = document.querySelector('#inputFile1');
            inputFile.addEventListener('change', mostrarImagen, false);
        }

        function mostrarImagen(e) {
            var img = document.querySelector('#img1');
            var inputFile = document.querySelector('#inputFile1');
            img.src = inputFile.value;
        }
    </script>

1 respuesta 1

6

Usando la API FileReader (IE10+) de HTML5

function init() {
  var inputFile = document.getElementById('inputFile1');
  inputFile.addEventListener('change', mostrarImagen, false);
}

function mostrarImagen(event) {
  var file = event.target.files[0];
  var reader = new FileReader();
  reader.onload = function(event) {
    var img = document.getElementById('img1');
    img.src= event.target.result;
  }
  reader.readAsDataURL(file);
}

window.addEventListener('load', init, false);
<img id="img1"><br/>
<input id="inputFile1" type="file">

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.