Ver Mensaje Individual
  #1 (permalink)  
Antiguo 21/01/2013, 15:30
lfna23
 
Fecha de Ingreso: enero-2013
Mensajes: 5
Antigüedad: 12 años
Puntos: 0
Pregunta Previsualizar imagen cargado con un type="file"

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.