Portada » JQuery biblioteca de JavaScript » Cargar imagen con jQuery, Ajax y PHP: Progress Bar

Cargar imagen con jQuery, Ajax y PHP: Progress Bar

Cargar imagen con jQuery, Ajax y PHP: Progress Bar. La carga de imágenes al servidor es un proceso que todo sistema web debe de tener. Por lo tanto, podemos subir imágenes usando diferentes  lenguajes de programación que interactúan al lado del servidor.

Si observamos, los grandes sistemas web como ejemplo el Facebook o Google poseen un sistema muy interactivo para cargar imágenes de los usuarios. Informándoles segundo a segundo el proceso de subida mediante una barra de progreso.

Es un método muy importante y que la mayoría de sistemas web no hay. Sin embargo, este método debería estar por defecto en la carga de imágenes. Para que los usuarios observen cómo va el proceso de subida de dicha imagen.

Cargar imagen con jQuery, Ajax y PHP: Progress Bar

La barra de progreso animado se puede realizar con el lenguaje jQuery y es uno de los lenguajes que nos ofrece esta importante animación en tiempo real.

En este ejemplo usaremos un formulario y vamos a implementar una barra de progreso con animación usando jQuery mientras cargamos una imagen a través de Ajax que llamara al PHP, lenguaje que realizara la carga.

Lenguajes que interactúan en este importante proceso de carga.

Componentes para cargar imagenes con jQuery
Componentes para cargar imagenes con jQuery

¿Cómo funciona este ejemplo?

Primeramente hay que presionar el botón «examinar» por consiguiente nos desplegara una ventana que nos permitirá la selección de la imagen que deseamos subir.

Todo el proceso ocurre cuando el usuario presiona el botón llamado «Cargar Imagen» que posee el ID submitButton, que desencadena una serie de eventos, llamando a la función mencionada.

Por lo tanto, jQuery envía la solicitud al fichero llamado «CargarArchivos.php». También verifica que todo este correcto, por ejemplo la ruta en donde almacenara las imágenes e inicia la barra de progreso.

La barra de progreso generada por jQuery resaltará de un color que ustedes pueden personalizar de acuerdo al color que maneja sistema web. Sin embargo, también mostrara el porcentaje de progreso al mismo tiempo.

Archivo PHP «CargarArchivos.php»

Es el motor de este proceso que se encargara de subir las imágenes y enviarlas a la carpeta definida por el usuario.

<?php
// Condicional para comprobar si presiono el boton cargar imagen
if (isset($_POST['btnSubmit'])) {
    $uploadfile = $_FILES["uploadImage"]["tmp_name"];
    // Ruta en el cual se almacena las imagenes
    $folderRuta = "subidas/";
    // Se verifica si la carpeta tiene permisos de escritura
    if (! is_writable($folderRuta) || ! is_dir($folderRuta)) {
        echo "error";
        exit();
    }
    if (move_uploaded_file($_FILES["uploadImage"]["tmp_name"], $folderRuta . $_FILES["uploadImage"]["name"])) {
        // Impresion de la imagen cargada mediante jQuery
        echo '<img src="' . $folderRuta . "" . $_FILES["uploadImage"]["name"] . '">';
        exit();
    }
}
?>
Cargar imagen con jQuery, Ajax y PHP Progress Bar
Cargar imagen con jQuery, Ajax y PHP Progress Bar

CONCLUSIÓN

La utilización de este método de subida de imágenes es muy recomendable en cualquier proyecto web y/o página web, ¿porque? Porque usando este método lograremos que el usuario pueda observar detalladamente en que porcentaje de subida va su imagen.

Punto 2. El ahorro en consumo de CPU de nuestro servidor y también la tasa de transferencia mensual.

DESCARGA

Descargar Código Fuente

 

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 0 / 5. Recuento de votos: 0

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad