How to load and view a local image

Question

How to load and view a local image

Navigation

#1 by (5 votes)

3

How can I show an image in img by selecting the file with 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>

javascript html

asked by Neyer 03.01.2017 в 19:41

source

1 answer

How to leave a service running in the background on Android by closing the application that starts it What is more effective? For or Foreach in PHP

score 5 · Accepted Answer

Using the API FileReader ( IE10+ ) of 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">