jQuery
jQuery
¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!

AjaxForm es un plugin jQuery útil para trabajar con formularios haciendo uso de ajax, nosotros vamos a ver cómo subir archivos con una barra de progreso.

El ejemplo será con múltiples archivos, de todas formas, si sólo queremos subir uno será igual de sencillo.

Si te interesa este tema, en el blog hay varias entradas que seguro te sirve.

Subir archivos con php y jQuery

Subir múltiples archivos con php

Subir imágenes con codeigniter y crear miniaturas

Dropzone, subida de archivos con jQuery, php y mysql

Lo primero que necesitamos es descargar el plugin jquery que ofrece esta funcionalidad.

Descargar ajaxform

Ahora crea un archivo llamado index.html y añade el siguiente código.


Todo el código del ejemplo es el que ofrecen en la documentación, tenemos un array de inputs de tipo file llamado archivo, éstos serán los que recibamos en el server.

El código jQuery simplemente comprueba los distintos momentos mientras sube el archivo, el beforeSend actúa cuando pulsamos en subir los archivos, el siguiente es el evento uploadProgress y es el que irá pintando progresivamente la barra de progreso, finalmente, el success terminará de completar la barra y el evento complete mostrará lo que devolvamos en el servidor, en nuestro caso un simple echo con el nombre del archivo que acabamos de subir.

Ahora crea el archivo que procesa el formulario llamado upload.php y añade el siguiente código.


Recuerda crear la carpeta files en la raíz del proyecto. En este momento, si tratas de subir cualquier archivo éste subirá sin problemas, la barra de progreso funcionará y los archivos serán ubicados en dicha carpeta.

Descargar ejemplo