Previsualizar imagen cargado con un type="file"

lfna23 · #1 (**permalink**) 21/01/2013, 15:30

Buenas tardes a todos, mi dilema es el siguiente, estoy haceindo un cms para mi pagina, y para darle mas estilo a la subida de imagenes quiero previsualizarlos, osea lo cargo con un form type="file" y quiero mostrarlo en un div, buscando por ahi encontre un codigo, donde este es el jquery

Código:

window.imagenVacia = 'data:image/gif;base64,R0lGODlhAQABAI' + 
                     'AAAAAAAP///ywAAAAAAQABAAACAUwAOw==';

window.mostrarVistaPrevia = function mostrarVistaPrevia(){
	
	//Para navegadores antiguos
	if(typeof FileReader !== "function" ){
		jQuery('#infoNombre').text('[Vista previa no disponible]');
		jQuery('#infoTamaño').text('(su navegador no soporta vista previa!)');
		return;
	}
	var Archivos,Lector;
	Archivos = jQuery('#archivo')[0].files;
	if(Archivos.length>0){
		
		Lector = new FileReader();
		Lector.onloadend = function(e){
			var origen,tipo;
			//Envía la imagen a la pantalla
			origen = e.target; //objeto FileReader
			jQuery('#vistaPrevia').attr('src', origen.result);
		};
		Lector.onerror = function(e){
			console.log(e)
		}
		Lector.readAsDataURL(Archivos[0]); 
	}else{
		var objeto = jQuery('#archivo');
		objeto.replaceWith(objeto.val('').clone());
		jQuery('#vistaPrevia').attr('src', window.imagenVacia);
	};


};

//Lee el tipo MIME de la cabecera de la imagen
window.obtenerTipoMIME = function obtenerTipoMIME(cabecera){
	return cabecera.replace(/data:([^;]+).*/, '\$1');
}

jQuery(document).ready(function(){
	
	//Cargamos la imagen "vacía" que actuará como Placeholder
	jQuery('#vistaPrevia').attr('src', window.imagenVacia);

	//El input del archivo lo vigilamos con un "delegado"
	jQuery('#botonera').on('change', '#archivo', function(e){
		window.mostrarVistaPrevia();
	});
	//El botón Cancelar lo vigilamos normalmente
	jQuery('#cancelar').on('click', function(e){
		var objeto = jQuery('#archivo');
		objeto.replaceWith(objeto.val('').clone());
		jQuery('#vistaPrevia').attr('src', window.imagenVacia);
		jQuery('#infoNombre').text('[Seleccione una imagen]');
		jQuery('#infoTamaño').text('');
	});

});

y este el codigo de html

Código HTML:

<div class="contenedor">
....ya esta añadido los scripts y todos eso.....
...muestro el body....																		<div id="marcoVistaPrevia" > <img id="vistaPrevia"  src="" alt="" /> </div> </div> <div id="botonera"> <input id="archivo" type="file" accept="image/*"></input> <input type="text" placeholder="Descripcion"></input> <button type="submit" value="" name="boton" class="btn btn-success"/>Guardar</button> </div>

...Funciona bien en una parte de mi código, pero si por ejemplo quiero también en otra parte de mi código ya no funciona, solo funciona para el código que mas arriba esta.
Ayudenme por favor, porque llevo dias tratando de ver porque funciona en uno y en el otro no.

emprear · #2 (**permalink**) 21/01/2013, 18:13

Probá de no usar jQuery

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>HTML5 FileReader</title>
</head>
<body>
<form action="#" method="post" id="subearchivos">
    <input type="file" id="archivos" name="archivos" />
    <div id="vista_previa"><!-- miniatura -->Vista previa</div>
    <input type="submit" id="enviar" name="enviar" />
        <input type="button" value="cancelar"  style="display: none;" onclick="cancela('subearchivos');" id="resetear" />
</form>
    <script>
    if (window.FileReader) {
      function seleccionArchivo(evt) {
        var files = evt.target.files;
        var f = files[0];
        var leerArchivo = new FileReader();
        document.getElementById('resetear').style.display= 'block';
          leerArchivo.onload = (function(elArchivo) {
            return function(e) {
              document.getElementById('vista_previa').innerHTML = '<img src="'+ e.target.result +'" alt="" width="250" />';
            };
          })(f);
    
          leerArchivo.readAsDataURL(f);
      }
     } else {
      document.getElementById('vista_previa').innerHTML = "El navegador no soporta vista previa";
    }
    
      document.getElementById('archivos').addEventListener('change', seleccionArchivo, false);
      
      function cancela(elForm){
document.getElementById(elForm).reset();
if (window.FileReader) {
document.getElementById('vista_previa').innerHTML = "Vista Previa";
}else{
document.getElementById('vista_previa').innerHTML = "El navegador no soporta vista previa";
}
        document.getElementById('resetear').style.display= 'none';
      }
    </script>
    
 </body>
</html>

El mensaje vista previa bien puede ser una imagen.
El problema con esta api sigue siendo la compatibilidad, IE9 y Safari no la soportan, para algo 100% compatible necesitas subir la imagen al server y mostrarla, por ejemplo en un iframe oculto
SAludos