Foros del Web » Programando para Internet » Javascript »

Vista previa de imagenes

Estas en el tema de Vista previa de imagenes en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/11/2017, 09:55
 
Fecha de Ingreso: mayo-2011
Mensajes: 1.201
Antigüedad: 12 años, 11 meses
Puntos: 10
Vista previa de imagenes

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
  #2 (permalink)  
Antiguo 01/11/2017, 11:55
 
Fecha de Ingreso: octubre-2009
Mensajes: 305
Antigüedad: 14 años, 6 meses
Puntos: 29
Respuesta: Vista previa de imagenes

busca plugins de carga de imágenes con el XHR 2.0
  #3 (permalink)  
Antiguo 01/11/2017, 12:19
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.448
Antigüedad: 8 años, 9 meses
Puntos: 263
Respuesta: Vista previa de imagenes

Prueba asi:

MUESTRA

Código Javascript:
Ver original
  1. function archivo(evt) {
  2.       var files = evt.target.files; // FileList object
  3.        
  4.         //Obtenemos la imagen del campo "file".
  5.       for (var i = 0, f; f = files[i]; i++) {        
  6.            //Solo admitimos imágenes.
  7.            if (!f.type.match('image.*')) {
  8.                 continue;
  9.            }
  10.        
  11.            var reader = new FileReader();
  12.            
  13.            reader.onload = (function(theFile) {
  14.                return function(e) {
  15.                // Creamos la imagen.
  16.                       document.getElementById("list").innerHTML = ['<img class="thumb" src="', e.target.result,'" title="', escape(theFile.name), '"/>'].join('');
  17.                };
  18.            })(f);
  19.  
  20.            reader.readAsDataURL(f);
  21.        }
  22. }
  23.              
  24.       document.getElementById('files').addEventListener('change', archivo, false);
__________________
[email protected]
HITCEL
  #4 (permalink)  
Antiguo 02/11/2017, 11:26
Avatar de haggenx  
Fecha de Ingreso: febrero-2007
Ubicación: México
Mensajes: 823
Antigüedad: 17 años, 2 meses
Puntos: 24
Respuesta: Vista previa de imagenes

interesante xfxstudios, gracias por compartirlo
__________________
Mi blog informático http://marjuanm.blogspot.mx
Fanpage del blog https://www.facebook.com/pages/Mis-p...36397183215592

Etiquetas: form, funcion, imagenes, previa, vista
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:09.