Subir archivos usando PHP – jQuery – Bootstrap

subir-archivos-php
Estoy consciente de que en la web existen muchos tutoriales que explican cómo subir archivos al servidor con PHP. Pero en esta ocasión quiero compartir un fragmento de código que me ha sido mucha utilidad a la hora de realizar mis proyectos web, pues se trata del código que uso para subir archivos a mi servidor web y especialmente cuando son imágenes. Hoy vamos a tratar de cargar un archivo con una forma muy interesante. En este tutorial se les mostrará cómo subir archivos usando PHP, jQuery y Bootstrap

Antes de empezar  echaremos un vistazo a la estructura de carpetas y archivos.

archivos

De acuerdo con la estructura de los archivos anteriormente, las imágenes se guardaran en dentro del directorio llamado upload. Para este tutorial los archivos CSS y JavaScript son cargados remotamente.

index.php

El archivo index.php contiene el código HTML y JavaScript. Tal como se muestra a continuación.

Código JavaScript: Hemos creado una función Javascript que se encargara de enviar los datos mediante Ajax al archivo upload.php, el cual a su vez se encargara de procesar la información enviada mediante jQuery Ajax

Código HTML: Hemos utilizado un formulario HTML con un campo de de tipo file el cual se encargá de seleccionar un archivo en nuestro ordenador. El ID del campo “fileToUpload” se usa como identificador único del formulario, el cual se usará en la función JavaScript para poder mandar los datos recogidos desde nuestro formulario;  luego dentro del mismo campo de tipo file hemos colocado un evento onchange, el cual se encarga de enviar automáticamente el formulario una vez hayamos seleccionado el archivo deseado desde nuestro ordenador.

upload.php

El archivo upload.php contiene todas las instrucciones necesarias para que se cargue el archivo que hemos enviado usando jQuery AJAX sea cargado a nuestro servidor. Ademas hemos colocado unas pequeñas validaciones del cliente para asegurarnos que el archivo enviado es el tipo de archivo que queremos alojar en nuestro servidor.

Conclusión

Este proceso de carga de archivos le ayudará cuando se quiere cargar el archivo sin recargar la página para ello hemos utilizado jQuery AJAX. No digo que este script sea el más seguro o el mejor que existe, ya que en la web existen otros script muy buenos que realizan tal función, pero considero que puede serviros en vuestros proyectos y es por ello que decidí compartirlo.

Para descargar los archivos, debes realizar cualquiera de las siguientes acciones sociales: 

  • William Umpire

    Excelente ejemplo!!! muy didactico, aunq tengo unas consultas. veo q no usas enctype=”multipart/form-data” para el envio de archivos en tu ejemplo, y ademas nose xq razon no me reconce el indice fileToupload del mini formulario de tu ejemplo, me manda este error: Notice: Undefined index: fileToUpload in C:xampphtdocsimagenupload.php on line 3 ……

  • HECTOR RIVERA

    hola, yo tengo una pregunta, yo uso uno de las ventanas modal para hacer el crud completo, en una de las vetanas de modal tengo un input file, al hacer la validación el fromulario no recibe el dato el post y en pocas palabras no adjunta el archivo me puedes dar consejos…