Blog Reacción Estudio

¡Tu zona de aprendizaje!

Previsualizar imagen con Html5 y Javascript

Con HTML5 y Javascript vamos a previsualizar la imagen que seleccionamos desde un campo «File«, todo esto es posible gracias a la API de archivos de HTML5.

Vamos con el código:

CSS

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

HTML

<input type="file" id="files" name="files[]" />
<br />
<output id="list"></output>

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);

El código Javascript debe ir al final de la página.

Aquí podemos ver el código completo:

<html>
	<head>
		<style>
          .thumb {
            height: 300px;
            border: 1px solid #000;
            margin: 10px 5px 0 0;
          }
        </style>
    </head>
    <body>
    	<input type="file" id="files" name="files[]" />
        <br />
        <output id="list"></output>
        
        <script>
		  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) {
				  // Insertamos 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);
	</script>
    </body>
</html>

Ver ejemplo