mostrar thumbnail al cargar imagen desde pc en input=type

BLAH !! · #1 (**permalink**) 10/04/2012, 19:57

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.-

IsaBelM · #2 (**permalink**) 11/04/2012, 06:51

lee este tema

zalito12 · #3 (**permalink**) 11/04/2012, 10:02

Ya te han dado un buen enlace, poder está claro que se puede lo vemos en miles de sitios web así que es posible!

BLAH !! · #4 (**permalink**) 13/04/2012, 09:29

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>

zalito12 · #5 (**permalink**) 13/04/2012, 11:11

Jo, quería copiarlo par ami biblioteca pero lo he probado y no me funciona, seguro que no falta nada?
Y gracias

Panino5001 · #6 (**permalink**) 13/04/2012, 11:17

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>

zalito12 · #7 (**permalink**) 13/04/2012, 13:24

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