Estudios PHP: ajax

Mostrando entradas con la etiqueta ajax. Mostrar todas las entradas

jueves, 13 de agosto de 2015

Laravel - Uso de jQuery Ajax

Autor: Duilio Palacios

Título: AJAX y Laravel usando jQuery

Descripción:

Ve la lección completa en: http://duilio.me/ajax-y-laravel-usand...

Otras sugerencias ...

	Jquery Ajax Login using Laravel 4 Part 2/2
	Curso de Laravel 5, CRUD Crear Usuario
	Protege el acceso a tu aplicación con los Middleware de Laravel 5
	Curso de Laravel 5.1 - Login y Registro
	Búsquedas y filtros con Laravel y Eloquent (Query scopes)
	laravel 5 crud (create, read, update, delete) application in Bangla
	Curso Laravel 5.1, Leer con AJAX
	Ajax Get Post Request in Laravel
	Aprende Laravel 5: Instalación y uso de Composer
	Eliminar registros con Laravel 5
	MyMovieDB Laravel AngularJS App - Part 5 - Laravel4 Database User Authentication
	Autenticación de usuario con Laravel 5
	How to implement search using Ajax in Laravel
	Curso de Laravel 5.1, CRUD Actualizar Usuario
	Curso de Laravel 5.1, Crear con AJAX
	Aplicando el principio de diseño de software DRY en Laravel 5
	Usando ajax en laravel PHP
	Filtros de búsqueda y paginación con Laravel 5
	Curso de Laravel 5.1: Middleware (parte 1 de 3)

lunes, 28 de julio de 2014

Subida múltiple de imágenes con AJAX y PHP

Bienvenid@s, hoy os traigo un ejemplo de como realizar una subida múltiple de imágenes, los archivos a subir son validados tanto del lado del cliente con Javascript como del lado del servidor con PHP sólo permitiendo imágenes y con unas determinadas características, se mostrará una vista previa de las imágenes a subir, la petición se hará a través de la tecnología AJAX.

El ejemplo ha sido extraido del siguiente vídeo:

El ejemplo se compone de dos archivos "multiple.php" que es donde se encuentra el formulario con el campo file múltiple y el código Javascript/jQuery para validar los archivos a subir y realizar la petición ajax al archivo "multiple-ajax.php" que es desde donde también validaremos los archivos enviados y los guardaremos en la carpeta "imagenes" en caso de ser imágenes válidas.

multiple.php

<!DOCTYPE HTML>
<html>
 <head>
     <meta charset="UTF-8">
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
   <script>
     $(function(){   
       $("#file").on("change", function(){
           /* Limpiar vista previa */
           $("#vista-previa").html('');
           var archivos = document.getElementById('file').files;
           var navegador = window.URL || window.webkitURL;
           /* Recorrer los archivos */
           for(x=0; x<archivos.length; x++)
           {
               /* Validar tamaño y tipo de archivo */
               var size = archivos[x].size;
               var type = archivos[x].type;
               var name = archivos[x].name;
               if (size > 1024*1024)
               {
                   $("#vista-previa").append("<p style='color: red'>El archivo "+name+" supera el máximo permitido 1MB</p>");
               }
               else if(type != 'image/jpeg' && type != 'image/jpg' && type != 'image/png' && type != 'image/gif')
               {
                   $("#vista-previa").append("<p style='color: red'>El archivo "+name+" no es del tipo de imagen permitida.</p>");
               }
               else
               {
                 var objeto_url = navegador.createObjectURL(archivos[x]);
                 $("#vista-previa").append("<img src="+objeto_url+" width='250' height='250'>");
               }
           }
       });
       
       $("#btn").on("click", function(){
            var formData = new FormData($("#formulario")[0]);
            var ruta = "multiple-ajax.php";
            $.ajax({
                url: ruta,
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function(datos)
                {
                    $("#respuesta").html(datos);
                }
            });
           });
       
     });
    </script>
 </head>
 <body>
 <form method="post" id="formulario" enctype="multipart/form-data">
    Subir imagen: <input type="file" id="file" name="file[]" multiple>
    <button type="button" id="btn">Subir imágenes</button>
 </form>
  <div id="vista-previa"></div>
  <div id="respuesta"></div>
 </body>
</html>

multiple-ajax.php

<?php

if (isset($_FILES["file"]))
{
   $reporte = null;
     for($x=0; $x<count($_FILES["file"]["name"]); $x++)
    {
    $file = $_FILES["file"];
    $nombre = $file["name"][$x];
    $tipo = $file["type"][$x];
    $ruta_provisional = $file["tmp_name"][$x];
    $size = $file["size"][$x];
    $dimensiones = getimagesize($ruta_provisional);
    $width = $dimensiones[0];
    $height = $dimensiones[1];
    $carpeta = "imagenes/";
    
    if ($tipo != 'image/jpeg' && $tipo != 'image/jpg' && $tipo != 'image/png' && $tipo != 'image/gif')
    {
        $reporte .= "<p style='color: red'>Error $nombre, el archivo no es una imagen.</p>";
    }
    else if($size > 1024*1024)
    {
        $reporte .= "<p style='color: red'>Error $nombre, el tamaño máximo permitido es 1mb</p>";
    }
    else if($width > 500 || $height > 500)
    {
        $reporte .= "<p style='color: red'>Error $nombre, la anchura y la altura máxima permitida es de 500px</p>";
    }
    else if($width < 60 || $height < 60)
    {
        $reporte .= "<p style='color: red'>Error $nombre, la anchura y la altura mínima permitida es de 60px</p>";
    }
    else
    {
        $src = $carpeta.$nombre;
        move_uploaded_file($ruta_provisional, $src);
        echo "<p style='color: blue'>La imagen $nombre ha sido subida con éxito</p>";
    }
    }
        echo $reporte;
}

jueves, 5 de junio de 2014

Crear un sistema captcha con PHP

Bienvenid@s, hoy veremos como crear nuestro propio sistema captcha para aplicar mayor seguridad a nuestra aplicación web, agregar un captcha a nuestros formularios puede ser una gran idea, de este modo podemos evitar de que robots maliciosos pueden enviar nuestros formularios de modo automático.

El captcha es básicamente una imagen que contiene un código que deberá ser ingresado por el usuario para que el formulario pueda ser enviado, nosotros crearemos la imagen que será del tipo PNG a través de la librería de funciones GD.

La imagen tendrá un código aleatorio, este código aleatorio será guardado encriptado con sha1 en una cookie, posteriormente al validar el formulario podremos acceder al valor de esa cookie y comprobar si el código captcha ingresado por el usuario es correcto.

Para el ejemplo, crearemos la imagen en un archivo llamado captcha.php, luego probaremos su funcionamiento creando un archivo llamado index.php donde incluiremos un formulario de prueba con un campo email y el campo captcha, este formulario lo validaremos a través de una petición AJAX a un archivo llamado ajax.php. A continuación puedes ver el código de cada uno de los archivos para que puedas probarlo en tu servidor, al final de este post puedes ver el vídeo explicativo.

captcha.php

<?php 
header("Content-Type: image/png");
$im = imagecreate(45, 23) or die("Ha ocurrido un error, librería de funciones GD no disponible");
$color_fondo = imagecolorallocate($im, 0, 0, 0);
$color_texto = imagecolorallocate($im, 255, 255, 255);
function generate_captcha($chars, $length)
{
$captcha = null;
for ($x = 0; $x < $length; $x++)
{
$rand = rand(0, count($chars)-1);
$captcha .= $chars[$rand];
}
return $captcha;
}
$captcha = generate_captcha(array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'), 4); /* 4 es la longitud del capcha */
setcookie('captcha', sha1($captcha), time()+60*3);
imagestring($im, 5, 5, 5,  $captcha, $color_texto);
imagepng($im);

index.php

<!DOCTYPE HTML>
<html>
 <head>
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
       <script>
     $(function(){
        $("#btn").on("click", function(){
            var formData = $("#formulario").serialize();
            var ruta = "ajax.php";
            $.ajax({
                url: ruta,
                type: "POST",
                data: formData,
                success: function(datos)
                {
                    $("#respuesta").html(datos);
                }
            });
        });
  
  $("#actualizar_captcha").on("click", function(){
           document.location.reload();
    });
     });
    </script>
 </head>
 <body>
<div id="respuesta"></div>
<form method="POST" id="formulario">
<table>
<tr>
<td>Email:</td><td><input type="email" id="email" name="email"></td>
</tr>
<tr>
<td>Captcha:</td><td><input type="text" id="captcha" name="captcha"></td>
</tr>
<tr><td></td><td><img src="captcha.php"><button id="actualizar_captcha" type="button">Actualizar</button></td></tr>
</table>
<button id="btn" type="button">Enviar</button>
</form>
 </body>
</html>

ajax.php

<?php 
if (isset($_POST))
{
$email = $_POST["email"];
$captcha = sha1($_POST["captcha"]);
$numero_captcha = $_COOKIE["captcha"];
if (!preg_match("/^[a-zA-Z0-9\._-]+@[a-zA-Z0-9-]{2,}[.][a-zA-Z]{2,4}$/", $email))
{
echo "<p style='color: red'>El formato de email es incorrecto</p>";
}
else if ($captcha != $numero_captcha)
{
echo "<p style='color: red'>El Captcha no coincide</p>";
}
else
{
//LAS ACCIONES CORRECTAS
echo "<p style='color: blue'>Acción llevada a cabo correctamente</p>";
/*Eliminamos la cookie*/
setcookie("captcha", "", -1);
?>
<script>
/*Restauramos el formulario y el captcha*/
document.getElementById("formulario").reset();
document.location.reload();
</script>
<?php
}
}
?>

lunes, 2 de junio de 2014

Subir varias imágenes con AJAX y obtener vista previa de las imágenes antes de subirlas

Bienvenid@s, hoy veremos un ejemplo de como subir varias imágenes con AJAX y como mostrar una vista previa de las imágenes antes de subirlas. Para mostrar la vista previa de las imágenes utilizaremos jQuery y Javascript, para ello detectaremos el evento "change" del input file, también validaremos del lado del cliente el tamaño máximo permitido que será 1MB y el tipo de archivo del que se trata, sólo permitidos jpg|jpeg|png|gif.

Una vez seleccionadas las imágenes que queremos subir, es momento de realizar la petición ajax, que la haremos al hacer click en botón del formulario a un archivo llamado "multiple-ajax.php" desde el cual recorreremos una a una las imágenes subidas, con php también validaremos los archivos a subir, verificando el tamaño máximo permitido 1MB, el tipo de archivo permitido: jpg|jpeg|gif|png y validaremos las dimensiones de la imagen, es decir, para que la imagen sea aceptada deberá no ser superior en su anchura o altura a 500px ni inferior a 60px.

Las imágenes serán guardadas en una carpeta llamada "imagenes", los archivos que intervienen son "index.php" desde donde realizaremos la petición AJAX a "multiple-ajax.php".

index.php

<!DOCTYPE HTML>
<html>
 <head>
     <meta charset="UTF-8">
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
   <script>
     $(function(){   
       $("#file").on("change", function(){
           /* Limpiar vista previa */
           $("#vista-previa").html('');
           var archivos = document.getElementById('file').files;
           var navegador = window.URL || window.webkitURL;
           /* Recorrer los archivos */
           for(x=0; x<archivos.length; x++)
           {
               /* Validar tamaño y tipo de archivo */
               var size = archivos[x].size;
               var type = archivos[x].type;
               var name = archivos[x].name;
               if (size > 1024*1024)
               {
                   $("#vista-previa").append("<p style='color: red'>El archivo "+name+" supera el máximo permitido 1MB</p>");
               }
               else if(type != 'image/jpeg' && type != 'image/jpg' && type != 'image/png' && type != 'image/gif')
               {
                   $("#vista-previa").append("<p style='color: red'>El archivo "+name+" no es del tipo de imagen permitida.</p>");
               }
               else
               {
                 var objeto_url = navegador.createObjectURL(archivos[x]);
                 $("#vista-previa").append("<img src="+objeto_url+" width='250' height='250'>");
               }
           }
       });
       
       $("#btn").on("click", function(){
            var formData = new FormData($("#formulario")[0]);
            var ruta = "multiple-ajax.php";
            $.ajax({
                url: ruta,
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function(datos)
                {
                    $("#respuesta").html(datos);
                }
            });
           });
       
     });
    </script>
 </head>
 <body>
 <form method="post" id="formulario" enctype="multipart/form-data">
    Subir imagen: <input type="file" id="file" name="file[]" multiple>
    <button type="button" id="btn">Subir imágenes</button>
 </form>
  <div id="vista-previa"></div>
  <div id="respuesta"></div>
 </body>
</html>

multiple-ajax.php

<?php

if (isset($_FILES["file"]))
{
   $reporte = null;
     for($x=0; $x<count($_FILES["file"]["name"]); $x++)
    {
    $file = $_FILES["file"];
    $nombre = $file["name"][$x];
    $tipo = $file["type"][$x];
    $ruta_provisional = $file["tmp_name"][$x];
    $size = $file["size"][$x];
    $dimensiones = getimagesize($ruta_provisional);
    $width = $dimensiones[0];
    $height = $dimensiones[1];
    $carpeta = "imagenes/";
    
    if ($tipo != 'image/jpeg' && $tipo != 'image/jpg' && $tipo != 'image/png' && $tipo != 'image/gif')
    {
        $reporte .= "<p style='color: red'>Error $nombre, el archivo no es una imagen.</p>";
    }
    else if($size > 1024*1024)
    {
        $reporte .= "<p style='color: red'>Error $nombre, el tamaño máximo permitido es 1mb</p>";
    }
    else if($width > 500 || $height > 500)
    {
        $reporte .= "<p style='color: red'>Error $nombre, la anchura y la altura máxima permitida es de 500px</p>";
    }
    else if($width < 60 || $height < 60)
    {
        $reporte .= "<p style='color: red'>Error $nombre, la anchura y la altura mínima permitida es de 60px</p>";
    }
    else
    {
        $src = $carpeta.$nombre;
        move_uploaded_file($ruta_provisional, $src);
        echo "<p style='color: blue'>La imagen $nombre ha sido subida con éxito</p>";
    }
    }
        echo $reporte;
}

sábado, 31 de mayo de 2014

Subir imágenes mediante AJAX

Bienvenid@s, hoy veremos un ejemplo de como subir imágenes al servidor mediante AJAX, esto puede ser útil para permitir por ejemplo a los usuarios que han iniciado sesión cambiar la foto de perfil. Para el ejemplo crea una carpeta en htdocs, en su interior crea una carpeta llamada imágenes que es donde iremos guardando las imágenes que vayamos subiendo, también vamos a crear dos archivos, uno llamado index.php que es donde se encontrará el formulario con el input file y el otro se llamará imagen-ajax.php que es donde realizaremos la petición AJAX.

index.php:

<!DOCTYPE HTML>
<html>
 <head>
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
   <script>
     $(function(){
        $("input[name='file']").on("change", function(){
            var formData = new FormData($("#formulario")[0]);
            var ruta = "imagen-ajax.php";
            $.ajax({
                url: ruta,
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function(datos)
                {
                    $("#respuesta").html(datos);
                }
            });
        });
     });
    </script>
 </head>
 <body>
 <form method="post" id="formulario" enctype="multipart/form-data">
    Subir imagen: <input type="file" name="file">
 </form>
  <div id="respuesta"></div>
 </body>
</html>

imagen-ajax.php

<?php
if (isset($_FILES["file"]))
{
    $file = $_FILES["file"];
    $nombre = $file["name"];
    $tipo = $file["type"];
    $ruta_provisional = $file["tmp_name"];
    $size = $file["size"];
    $dimensiones = getimagesize($ruta_provisional);
    $width = $dimensiones[0];
    $height = $dimensiones[1];
    $carpeta = "imagenes/";
    
    if ($tipo != 'image/jpg' && $tipo != 'image/jpeg' && $tipo != 'image/png' && $tipo != 'image/gif')
    {
      echo "Error, el archivo no es una imagen"; 
    }
    else if ($size > 1024*1024)
    {
      echo "Error, el tamaño máximo permitido es un 1MB";
    }
    else if ($width > 500 || $height > 500)
    {
        echo "Error la anchura y la altura maxima permitida es 500px";
    }
    else if($width < 60 || $height < 60)
    {
        echo "Error la anchura y la altura mínima permitida es 60px";
    }
    else
    {
        $src = $carpeta.$nombre;
        move_uploaded_file($ruta_provisional, $src);
        echo "<img src='$src'>";
    }
}