Subir imagen con progress bar usando jquery php

Subir imagen con progress bar usando jquery php
  • Versión
  • Descargar 1635
  • Tamaño del archivo 203 KB
  • Recuento de archivos 1
  • Fecha de creación 17 julio, 2018
  • Última actualización 19 marzo, 2019

Subir imagen con progress bar usando jquery php

Subir imagen con progress bar usando jquery php. La subida de imágenes y/o archivos al servidor siempre fue un método muy usado entre los lenguajes de programación que trabajan al lado del servidor. Por ende, es importante que nuestro formulario debe tener una barra de progreso para informar al usuario.

Es una característica muy importante y que la mayoría de los desarrolladores ignoran. Sin embargo, este método debería ser visto como parte de la funcionalidad de un sistema de carga de ficheros. Para que los usuarios se sientan seguros de que las imágenes están transitando por un buen camino y no adivinar si se truncó la carga de ficheros.

Subir imagen con progress bar usando jquery php

Si observamos la mayoría de sistemas operativos posee un “progress bar” para informar al usuario de la copia de ficheros. Por lo tanto, en el tema de servidores debería ser lo mismo cuando el usuario interactúa con el servidor.

La barra de progreso se puede realizar con el lenguaje jQuery y es una de las mejores maneras de mostrar el estado de subidas y/o cargas de archivos.

En este pequeño formulario, vamos a aprender a crear 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.

Cargar Imagen Progress Bar
Cargar Imagen Progress Bar

 

Por lo tanto, después de enviar la solicitud de carga de archivos al PHP, el script AJAX verifica que todo este correcto, por ejemplo la ruta en donde será almacenada la carga de ficheros e inicializa la animación jQuery para mostrar la barra de progreso.

La barra de progreso resaltará de un color que ustedes pueden personalizar de acuerdo a la psicología de colores que maneja su proyecto web. Sin embargo, también mostrara el porcentaje de progreso con la animación jQuery al mismo tiempo.

Formulario HTML con carga de archivo de imagen y/o archivos

Es la página principal que mostrará un formulario HTML con el campo de entrada para cargar archivos. Los usuarios elegirán el archivo y enviarán los datos presionando el botón "cargar imagen" enviando el formulario.

<div class="form-container"> 
  <form class="form-inline" action="CargarArchivos.php" id="uploadForm" name="frmupload" method="post" enctype="multipart/form-data">
    <div class="form-group mx-sm-3 mb-2">
      <input type="file" id="uploadImage" name="uploadImage" />
    </div>
    <button id="submitButton" type="submit" class="btn btn-primary mb-2" name='btnSubmit'>Cargar imagen</button>
  </form>
  <div class='progress' id="progressDivId">
    <div class='progress-bar' id='progressBar'></div>
    <div class='percent' id='percent'>0%</div>
  </div>
  <div style="height: 10px;"></div>
  <div id='salidaImagen'></div>
 </div>

Resultado final después de la carga de presionar el botón cargar imágenes

Subir imagen con progress bar usando jquery php
Subir imagen con progress bar usando jquery php
Descarga 156 Sistemas PHP & MySQL
Botón volver arriba