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

Sobre Reacción Estudio

Somos un estudio informático formado por jóvenes centrados en el desarrollo web, el diseño gráfico y la fotografía. Puedes solicitar presupuesto para tu proyecto a través de nuestra página web o por teléfono, pero en este blog hablaremos de todo lo que engloba el desarrollo web a día de hoy.


  • http://problemasconIE8 cesar

    me genera un error en esta parte

    document.getElementById(‘files’).addEventListener(‘change’, archivo, false);

  • admin

    El input tiene que tener la ID files, como se muestra en la entrada:

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

    Además, te recuerdo que tu navegador debe soportar HTML 5 y tener Javascript activado.

    Un saludo.

  • Sebastian

    Hola! muy buena forma de previsualizar las imagenes, te hago una consulta… como podría hacer para que aparezca una “X” para cancelar la previsualización de esa imagen, gracias y un saludo!

    • admin

      Si te fijas, la imagen que previsualizas tiene la id “thumb”. Podrías hacer con jQuery que al pulsar un enlace o una imagen con una “X” como tu dices se oculte.

      En ésta línea del script deberías poner algo así

      document.getElementById("list").innerHTML = ['<a href="#" id="cerrar_img">Ocultar imagen</a><br /><img class="thumb" src="', e.target.result,'" title="', escape(theFile.name), '"/>'].join('');
      

      Y el código jQuery algo así:

      $(document).ready(function(){
      
      $("#cerrar_img").click(function(event){
      event.preventDefault();
      
      //ocultamos la imagen
      $(".thumb").hide();
      
      });
      
      });
      

      No he probado el código, pero debería funcionar.

      Un saludo.

  • LEEC_123

    Como puedo hacer para que se guarde en blob validadndo que se haya seleccionado una imagen jpeg?

    • Alberto

      en blob? a qué te refieres?

  • hada_negra8

    una consulta ¿por qué cuando pongo en un form con metodo post no me funciona la vista preliminar de la imagen?

  • jaime daniel carmona suarez

    se podrian crear varios inpt y img para previsualizarlos????

  • Jonathan Isso Zuich

    Estimado, tengo un problema a la hora de ejecutar este codigo. Si bien la vista previa anda bien, a la hora de insertar a la base no me lo esta haciendo ya que el array que ustedes llaman files[i] cuando le digo que inserte files[0], la imagen en la bbase me da error. Hay manera de usar solamente el id files y no el array files[i] ??

    Como quedaria el codigo? mil disculpas

  • yren rivero fernandez

    es porque has puesto el codigo javascript antes que el html,

    para dejar el js antes deberias cargar con un $(document).ready(function() de jquery

    saludos!

  • fredy

    Bueno el script y como puedo hacer para enviar los datos a php

  • juan

    como hago para que se ejecute la vista previa despues de haberla subido’

    que yo le de en enviar y se me genere la vista previa

  • Julian Lasso

    Mil gracias, funciona de maravilla :)
    incluso curioseando un poco el código logré desde navegador validar el tamaño de la imágen para no dejarla llevar hasta el servidor :)

  • Elingeniero Prod

    Hermano excelente aporte pero tengo una pregunta: Como capturo ese campo en otro archivo? es decir la imagen carga perfecto pero cuando la voy a pasar a un controlador por medio de la variable $_FILES[] no la recibe. tengo esto en el archivo que tengo que recibirla: echo “Tamaño: “.$_FILES['files']['size'];
    echo “Tipo: “.$_FILES['files']['type'];
    echo “Nombre: “.$_FILES['files']['tmp_name']; y no llega nada. sabes como puedo capturarla? gracias.

  • I’m root

    Buen ejemplo saludos!!

  • Sofia Quispe

    ¡Hola! Me sirvio, pero si quiero seguir subiendo más imagenes y que se pongan una arriba de la otra o al costado ¿cómo hago?

  • Juenidtson Gonzalez

    Excelente! Amigo como puedo mostrar esa misma imagen en otra vista?

  • Israel Gómez

    Muy buena aportación . Gracias Y tengo la duda si en vez de ser una imagen tengo un archivo PDF como le haría?

  • Jack Velardy

    no funciono

  • Mauro Joannas

    hola esta muy bueno estoy haciendo una pagina q actualiza una noticia y nose como mostrar primero la imagen q ya tenia cargada la noticia en la bd

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies.     ACEPTAR