Vista previa de imagenes

[pithon]

En un formulario tengo tres campos de tipo archivo estos campos son para imagenes y lo que quiero es hacer una vista previa de cada uno al cargar el archivo, por ejemplo con el evento onchange en cada campo.

Lo que hago es un formulario para cada campo de imagen, el problema es que hasta que una imagen no esta cargada no se puede enviar otra imagen.

Como deberia hacer que funcione bien que logica tendria que tener para tal efecto, osea ir mostrando las vista previa decada archivo cargado.

Saludos

[sustentio]

busca plugins de carga de imágenes con el XHR 2.0

[xfxstudios]

Prueba asi:

MUESTRA

Código 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);
 

[haggenx]

interesante xfxstudios, gracias por compartirlo