Carga de imágenes con Ajax usando PHP y jQuery

En esta publicación del blog, hemos cubierto uno de los temas mas interesantes de ajax, es decir la, Carga de imágenes con Ajax usando PHP y jQuery  sin actualizar la página.

Descripción

En este proceso, la imagen se selecciona primero y se previsualiza antes de almacenarla en cualquier ubicación. Luego, usando jQuery Ajax, se envía al script php en el evento de envío del botón de nuestro formulario.

El script PHP almacena la imagen en una ubicación definida y devuelve el mensaje de éxito o el mensaje de error del proceso.

Aquí aplicamos algunas validaciones en el archivo seleccionado, para verificar si es un archivo de imagen (jpg, jpeg o png) o cualquier otro tipo de archivo.

Se permite cargar archivos de tamaño  de hasta 100 Kb.

Los siguientes pasos se realizan en este proceso:

1. Incluir la biblioteca jQuery.

2. Creación de página HTML con campo de carga archivos.

3. Código jQuery Ajax.

4. Script PHP para almacenar la imagen.

A continuación se muestra nuestro código completo con la opción de demostración en vivo y descarga

DESCARGAR ARCHIVOS

index.php: Página HTML que contiene el campo de carga de archivos.

Código jQuery completo: script.js

Script PHP que procesa los datos enviados mediante ajax: ajax_php_file.php

Código CSS: style.css

Conclusión:
En este post hemos cubierto un tema básico de ajax, como lo es la carga de imágenes usando php con validaciones aplicadas en el código. Esperamos que este ejemplo te haya funcionado para que entiendas la funcionalidad de las propiedades de Ajax.