1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Tutorial Subir imagen al servidor (Foto perfil)

Tema en 'Tutoriales de Javascript' comenzado por gammafp, 11 de Abril de 2015.

  1. gammafp

    gammafp
    Moderador
    Miembro del Equipo

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    782
    Me gusta recibidos:
    344
    Puntos de trofeos:
    63
    Género:
    Hombre
    Hola a todos, la historia empieza cuando pretendía hacer una sección de usuario donde el usuario pudiese subir sus foto de perfil, pero habían problemas (OH, NOO!!), me pregunté: y si hay alguien que sea tan listo de subirme una imagen de 5MB, la página que antes pesaba 300KB terminará pesando 1GB. Bueno esto se soluciona poniendo un limitador como if(archivo.size>=5000){alert('recorta imagen desgraciao')}, pero seguro habrá otro que no sepa recortar una imagen con paint y se nos iría el chiringuito al garete. Al fin y al cabo esto se trata de que las personas no tengan que hacer nada para subir una simple imagen, con lo cual decidí hacer o siguiente:
    Que un usuario suba una imagen y que la página modifique su tamaño por consiguiente su peso, y no solo hacerlo con css modificando el width ya que el resultado de eso era una imagen con las dimensiones correctas pero con el mismo peso que la imagen original. Pues hacerlo en JavaScript. A pesar que decian que no se podía hacer sin un framework pues lo decidí hacer solo con JavaScript.
    Las apis usadas son las de HTML5: api File, api Canvas.
    Lo que hace este codígo es lo siguiente:
    1-)Tenemos un div con un id="cajadatos" y un css linkado para ponerlo bonito, esto es para pillar el drag and drop una vez pillado el evento de drop llamo a la funcion sotar y dentro de la funcion cojo el evento que se genera.
    2-) dentro de la funcion soltar(e), uso el api File para para cargar el archivo arrastrado y meterlo a la funcion redimencionar() con sus respectivas dimensiones donde representan altura y anchura.
    3-)dentro de la funcion llamo a canvas y creo una imagen con canvas y redimenciono la imagen con canvas y esto generará una imagen con base64 y luego con esa información en base64 la envio por medio de ajax al php que lo procesará y lo subirá al servidor.

    Nota: Esto es un ejemplo y es un prototipo funcional de lo que tengo pensado hacer.
    HTML:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Gammafp</title>
    <script type="text/javascript">
        function iniciador(){
            /*Esto pilla los eventos del drag and drop*/
            obj=document.getElementById('cajadatos');
            obj.addEventListener('dragenter', defecto, false);
            obj.addEventListener('dragover', defecto, false);
            obj.addEventListener('drop', soltar, false);
        }
        function redimensionar(resultado, x, y){
            var imagen=new Image();
            imagen.src=resultado;
            imagen.onload=function(){
                var w=this.width;
                var h=this.height;
                var scale=Math.min(x/w,y/h)
                var canvas=document.createElement('canvas');
                var ctx=canvas.getContext('2d');
                canvas.width=w*scale;
                canvas.height=h*scale;
                ctx.drawImage(imagen,0,0,w*scale,h*scale);
                obj.innerHTML='<img src="'+canvas.toDataURL()+'">';
                var objeto=canvas.toDataURL();
                console.log(objeto);
                var envio=new FormData();
                envio.append('foto',objeto);
                var conexion=new XMLHttpRequest();
                conexion.onreadystatechange=respuesta;
                conexion.open('POST', 'pagina2.php',true);
                conexion.send(envio);
                function respuesta(){
                    if(conexion.readyState==4){
                        alert(conexion.responseText);
                    }
                }
            }
        }
        function defecto(e){
            e.preventDefault();
            obj.style.backgroundColor='orange';
        }
        function soltar(e){
    /*se usa preventDefault() para evitar que se redireccione al subir la imagen*/
            e.preventDefault();
            var archivos=e.dataTransfer.files;
            var archivo=archivos[0];
            var lectura=new FileReader();
            lectura.onload=function(ev){
                var resultado=ev.target.result;
                //Funcion de redimensionar
                redimensionar(resultado, 200, 200);
            }
            lectura.readAsDataURL(archivo);    
        }
        window.addEventListener('load', iniciador, false);
    </script>
    <style>
        #cajadatos{
            width: 400px;
            height: 400px;
            border: 2px dotted orange;
        }
    </style>
    </head>
    <body>
        <section>
            <div id="cajadatos"></div>
        </section>
    </html>
    archivo php para subir imagen
    PHP:
    <?php
    $codigo=$_POST['foto'];
    //Elimina data:image/png, y base64 de la cadena
    list(,$codigo)=explode(';',$codigo);
    list(, $codigo)=explode(',',$codigo);
    //esto decodifica de la base 64
    $codigo=base64_decode($codigo);
    file_put_contents('gammafp.png',$codigo);

    copy('gammafp.png','gammafp.png');
    echo "La foto se registro en el servidor.<br>";
    ?>
    Para muestra un boton, el programa funcionando, reduciendo la imagen de 1920 a 200 px
    http://gyazo.com/293ac86bf7d50c54fc7744dc30aebf51

    Repito esto es solo un ejemplo que he decidido crear, no está terminado y es muy mejorable. Sin embargo es funcional.
     

    Archivos adjuntos:

    Última modificación: 11 de Abril de 2015
    A AngelKrak, cecato y Maddenamy les gusta esto.
  2. Maddenamy

    Maddenamy Miembro conocido

    Se incorporó:
    9 de Enero de 2015
    Mensajes:
    878
    Me gusta recibidos:
    508
    Puntos de trofeos:
    93
    Ocupación:
    Estudiante
    Localización:
    México
    Página web:
    Muy buen tutorial @gammafp !
    Lo usare el el futuro.
     
    A gammafp le gusta esto.
  3. gammafp

    gammafp
    Moderador
    Miembro del Equipo

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    782
    Me gusta recibidos:
    344
    Puntos de trofeos:
    63
    Género:
    Hombre
    Gracias por el comentario
     
  4. Euler

    Euler Nuevo Miembro

    Se incorporó:
    17 de Abril de 2015
    Mensajes:
    1
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Hombe muy bueno (Y)
     
  5. gammafp

    gammafp
    Moderador
    Miembro del Equipo

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    782
    Me gusta recibidos:
    344
    Puntos de trofeos:
    63
    Género:
    Hombre
    Gracias por los comentarios
     
  6. KaoruMishimaru_20

    KaoruMishimaru_20 Miembro conocido

    Se incorporó:
    11 de Agosto de 2015
    Mensajes:
    505
    Me gusta recibidos:
    317
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    KaoruMishimaru
    Localización:
    Argentina, Buenos Aires, La Plata
    Página web:
    Genial! Tema medio viejo, pero me sirvió como orientación de lo que quería hacer XD
     
    A AngelKrak le gusta esto.
  7. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    584
    Me gusta recibidos:
    442
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Buen aporte :)... !!! Saludos
     

Comparte esta página