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.