JSFiddle - React, Tailwind, and code Playground

by Carlos Quintero

HTML

<input type="file" id="files" name="files[]" />
<br />
<output id="list"></output>
<a href="http://blog.reaccionestudio.com/previsualizar-imagen-antes-de-subirla-con-html5-y-javascript/" target="_blank">Fuente</a>

CSS

.thumb{
     height: 300px;
     border: 1px solid #000;
     margin: 10px 5px 0 0;
}

JavaScript

function archivo(evt) {
      var files = evt.target.files; // FileList object
       
        //Obtenemos la imagen del campo "file". 
      for (var i = 0, f; f = files[i]; i++) {         
           //Solo admitimos imágenes.
           if (!f.type.match('image.*')) {
                continue;
           }
       
           var reader = new FileReader();
           
           reader.onload = (function(theFile) {
               return function(e) {
               // Creamos la imagen.
                      document.getElementById("list").innerHTML = ['<img class="thumb" src="', e.target.result,'" title="', escape(theFile.name), '"/>'].join('');
               };
           })(f);
 
           reader.readAsDataURL(f);
       }
}
             
      document.getElementById('files').addEventListener('change', archivo, false);