lunes, 22 de octubre de 2018
Como subir una foto con ajax a nuestro servidor

Como subir una foto con ajax a nuestro servidor

A dia de hoy hay muchas librerias que hacen el trabajo sucio y claramente molan mucho y ademas soy muy eficientes, ejemplo React, Vue etc.

Subir una foto asyncrónamente con estas libreria es más fácil que leer este post pero nosotros al ser de la vieja andanza lo vamos hacer con jQuery.

vamos a ello!!

Nota:Tener en cuenta que hay que añadir jQuery antes.

1- Tenemos un input

<input type="file" id="my-pic">

2- En nuestro js (espero que no lo hagas inline)

$(document).ready(function(){
      $(document).on('change','#my-pic',function(){
        var file = document.getElementById('my-pic').files[0];
        var img_name = file.name;
        var img_ext = img_name.split('.').pop().toLowerCase(); //ej: jpg,png,gif

        if(jQuery.inArray(img_ext,['gif','jpg','jpeg','png','']) == -1){
          alert("Gañan, solo se admiten imagenes ");
        }

        var form_data = new FormData();
        form_data.append("file",file);
        $.ajax({
          url:'midominio.com/upload.php',
          method:'POST',
          data:form_data,
          contentType:false,
          cache:false,
          processData:false,
          beforeSend:function(){
            //puedes poner un loader dando vuelta para que mole más
          },
          success:function(data){
            //mostramos un mensaje en plan Imagen subida correctamente.
          }
        });
      });
    });

3-Nuestro archivo php o controlador que procese la petición

if($_FILES['file']['name'] != ''){
    $f = explode('.', $_FILES['file']['name']);
    $ext = end($f);   
    $name_file = uniqid('pic-').rand(100,999).$ext;

    $path = 'uploads/'.$name_file;
    move_uploaded_file($_FILES['file']['tmp_name'], $path);
}

Esto es todo, ya puedes ponerlo en un metódo que haga un return para que puedas hacer algo en el js etc.

Esto es todo folks

 

Quieres ser el primero en responder?