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