Foros del Web » Programando para Internet » Javascript »

mostrar thumbnail al cargar imagen desde pc en input=type

Estas en el tema de mostrar thumbnail al cargar imagen desde pc en input=type en el foro de Javascript en Foros del Web. Hola a todos, tengo una consulta, se puede realizar esto ? Mostrar thumbnail al cargar imagen desde pc, por un input=type. Me refiero a que ...
  #1 (permalink)  
Antiguo 10/04/2012, 19:57
Avatar de BLAH !!  
Fecha de Ingreso: septiembre-2003
Ubicación: Región Metropolitana, Santiago, Chile
Mensajes: 706
Antigüedad: 20 años, 8 meses
Puntos: 16
Pregunta mostrar thumbnail al cargar imagen desde pc en input=type

Hola a todos, tengo una consulta, se puede realizar esto ?

Mostrar thumbnail al cargar imagen desde pc, por un input=type.

Me refiero a que tengo un formulario para subir una imagen a mi bd, pero quiero que el cliente pueda visualizar dicha imagen antes de guardarla en la bd.

Si alguine sabe algo por favor me informa
Muchas gracias.-
__________________
Adios ...!!!!
  #2 (permalink)  
Antiguo 11/04/2012, 06:51
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años
Puntos: 1012
Respuesta: mostrar thumbnail al cargar imagen desde pc en input=type

lee este tema
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #3 (permalink)  
Antiguo 11/04/2012, 10:02
Avatar de zalito12  
Fecha de Ingreso: noviembre-2011
Ubicación: Coruña, España
Mensajes: 430
Antigüedad: 12 años, 7 meses
Puntos: 67
Respuesta: mostrar thumbnail al cargar imagen desde pc en input=type

Ya te han dado un buen enlace, poder está claro que se puede lo vemos en miles de sitios web así que es posible!
  #4 (permalink)  
Antiguo 13/04/2012, 09:29
Avatar de BLAH !!  
Fecha de Ingreso: septiembre-2003
Ubicación: Región Metropolitana, Santiago, Chile
Mensajes: 706
Antigüedad: 20 años, 8 meses
Puntos: 16
Exclamación Respuesta: mostrar thumbnail al cargar imagen desde pc en input=type

APORTE: LO ENCONTRE EN UNA WEB, SOLO CON JS

PARA NO PERDER EL FORMATO DE LA IMAGEN PUEDEN BORRAR .width() o .height()

Código:
    <!DOCTYPE html>
    <html>

    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script>
    function readURL(input) {
    if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
    $('#img_prev')
    .attr('src', e.target.result)
    .width(150);     // ACA ESPECIFICAN QUE TAMANO DE ANCHO QUIEREN
    .height(150);   //  ACA ESPECIFICAN QUE TAMANO DE ALTO QUIEREN
    };
    reader.readAsDataURL(input.files[0]);
    }
    }
    </script>
    <meta charset=utf-8 />
    <title>JS Bin</title>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    </head>

    <body>
    <input type='file' onchange="readURL(this);" />
    <img id="img_prev" src="#" alt="your image" />
    </body>

    </html>
__________________
Adios ...!!!!
  #5 (permalink)  
Antiguo 13/04/2012, 11:11
Avatar de zalito12  
Fecha de Ingreso: noviembre-2011
Ubicación: Coruña, España
Mensajes: 430
Antigüedad: 12 años, 7 meses
Puntos: 67
Respuesta: mostrar thumbnail al cargar imagen desde pc en input=type

Jo, quería copiarlo par ami biblioteca pero lo he probado y no me funciona, seguro que no falta nada?
Y gracias
  #6 (permalink)  
Antiguo 13/04/2012, 11:17
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años
Puntos: 834
Respuesta: mostrar thumbnail al cargar imagen desde pc en input=type

Aquí hay otra opción que posteamos en su momento en este foro:
Hay que testearla en servidor web para que funcione en algunos navegadores. En explorer, que no soporta esta api en la versión que uso, degrada elegantemente.
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<
title>Documento sin título</title>
<
script type="text/javascript">
function 
redimensionar(im,maxWidth,maxHeight){
    var 
i=new Image();
    
i.onload=function(){
        var 
w=this.width,
        
h=this.height,
        
scale=Math.min(maxWidth/w,maxHeight/h),
        
canvas=document.createElement('canvas'),
        
ctx=canvas.getContext('2d');
        
canvas.width=w*scale;
        
canvas.height=h*scale;
        
ctx.drawImage(i,0,0,w*scale,h*scale);
        $(
'prev').innerHTML='<img src="'+canvas.toDataURL()+'">';
        
    }
    
i.src=im;
}
function 
previsualizar(e){
    if (!!
window.FileReader){
        var 
input=e.target,fr=new FileReader(),
        
tipos=/^image/jpg|image/jpeg|image/png|image/gif$/i;
        if(
input.files.length===0)return;
        if(!
tipos.test(input.files[0].type)){alert("El formato del archivo seleccionado es incorrecto",1);return;}
        
fr.onload=function(evt){
            var 
im=evt.target.result;
            if (
document.createElement("canvas").getContext)
                
redimensionar(im,149,149);
            else{
                $(
'namefoto').innerHTML=(e.target || e.srcElement).value;
            }
        }
        
fr.readAsDataURL(input.files[0]);
    }else{
        $(
'namefoto').innerHTML=(e.target || e.srcElement).value;
    }
}
function $(
x){return document.getElementById(x);}
function 
init(){
    $(
'pp').onchange=previsualizar;
}
onload=init;
</script>

</head>

<body>
<form>
<input id="pp" name="pp" type="file" />
<div id="namefoto"></div>
<div id="prev"></div>
</form>
</body>
</html> 
  #7 (permalink)  
Antiguo 13/04/2012, 13:24
Avatar de zalito12  
Fecha de Ingreso: noviembre-2011
Ubicación: Coruña, España
Mensajes: 430
Antigüedad: 12 años, 7 meses
Puntos: 67
Respuesta: mostrar thumbnail al cargar imagen desde pc en input=type

Gracias, debió ser que lo probé en local :D

Etiquetas: file, input, previsualizar, thumbnails
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 16:47.