Cómo añadir una función de carga de archivos en PHP con jQuery AJAX

Puntos clave

• Utiliza PHP y jQuery juntos para permitir subidas de archivos fluidas y basadas en AJAX sin recargar la página.
• Valida siempre los tipos y tamaños de archivo para proteger tu servidor de subidas no deseadas.
• Sanitiza los nombres de los archivos para evitar riesgos de seguridad como los ataques a través de rutas.
• Mejora la experiencia del usuario con indicadores de progreso en tiempo real y mensajes de estado de carga.
• Almacena los detalles de los archivos subidos de forma segura y, opcionalmente, utiliza SQLite para un registro ligero de la base de datos.

Permitir a los usuarios subir archivos es una característica común en muchos sitios web, ya sean imágenes, PDF u otros documentos. Si estás construyendo algo que necesita esto, aprender a configurarlo con PHP y jQuery puede ahorrarte mucho tiempo y dolores de cabeza.

PHP hace que el manejo de archivos sea bastante sencillo. Y cuando lo combinas con jQuery y AJAX, puedes hacer que la experiencia de carga sea fluida sin necesidad de recargar la página.

En este tutorial, empezaremos con una versión sencilla de un tutorial de carga de archivos PHP y la iremos ampliando gradualmente, añadiendo comprobaciones de tipo y tamaño de archivo, limpieza de nombres de archivo, una barra de progreso e incluso una pequeña galería para previsualizar los archivos cargados.

Empecemos.

Requisitos previos

Antes de entrar en materia, esto es lo que necesitarás:

• Un servidor en vivo o un servidor local:
  • Puedes utilizar XAMPP o MAMP para el desarrollo local (esto incluye Apache, MySQL y PHP fuera de la caja).
  • En este tutorial, utilizaré Cloudways para desplegar mi servidor y mi aplicación online, lo que elimina la necesidad de configuración local y proporciona una plataforma fácil de usar con una pila integrada.
• Una forma de acceder a los archivos de tu servidor:
  • Utilizo FileZilla para subir y gestionar archivos en mi servidor.
• Conocimientos básicos de HTML, PHP y jQuery. Aunque no los tengas, te guiaré paso a paso.

Base de datos (opcional): Utilizaremos SQLite más adelante en el tutorial para registrar la información de los archivos subidos, así que no necesitas una configuración MySQL completa.

Para este tutorial, utilizaremos Cloudways para lanzar un servidor con una aplicación WordPress desplegada. Sin embargo, nos centraremos en crear una función PHP independiente.

¿Qué estamos construyendo?

Construiremos una sencilla interfaz web en la que un usuario pueda subir un archivo (por ejemplo, una imagen, un PDF, etc.), y el archivo se almacenará en el servidor, sin necesidad de actualizar la página. Utilizaremos:

• HTML para el formulariojQuery para capturar la entrada del archivo y enviarla mediante AJAX
• PHP en el backend para gestionar la carga
• FileZilla para subir archivos a tu servidor Cloudways

Al final, cargaremos el formulario en el navegador y subiremos un archivo para asegurarnos de que todo funciona.

¡Potencia tus aplicaciones PHP con el hosting gestionado de Cloudways!

¡Experimenta el siguiente nivel de rendimiento con nuestro alojamiento PHP gestionado! Eleva tus proyectos web hoy mismo. ¡Empieza ya!

¡Pruébalo gratis!

Parte 1: Configurar la carga básica de archivos

Empezaremos con un sencillo sistema de subida de archivos. Tendrás una página web en la que los usuarios podrán seleccionar un archivo y hacer clic en subir. El archivo se enviará al servidor mediante AJAX sin actualizar la página.

Paso 1: Crea tu estructura de carpetas

En tu aplicación Cloudways (o public_html local), crea una nueva carpeta para este proyecto. Llamaré a la mía Carga de archivos.

Dentro de la carga de archivos, crea estas tres cosas:

1. index.html – Nuestro archivo principal del frontend.
2. upload.php – El script backend que gestiona las subidas.
3. uploads/ – Una carpeta para almacenar los archivos subidos.

Puedes crear esta estructura utilizando FileZilla navegando hasta public_html, haciendo clic con el botón derecho del ratón para crear un directorio (file-upload) y, a continuación, creando los archivos y carpetas dentro de él.

Paso 2: Construye el formulario HTML (index.html)

Escribamos la interfaz de carga. Este es el archivo con el que interactuarán los usuarios. Editemos el archivo index.html que creamos antes y peguemos en él este código:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Simple File Upload</title>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

</head>

<body>

<h2>Upload a File</h2>

<input type="file" id="fileInput">

<button id="uploadBtn">Upload</button>

<div id="status"></div>

<script>

$('#uploadBtn').on('click', function () {

var file = $('#fileInput')[0].files[0];

if (!file) {

$('#status').text('Please select a file.');

return;

}

var formData = new FormData();

formData.append('file', file);

$.ajax({

url: 'upload.php',

type: 'POST',

data: formData,

processData: false,

contentType: false,

success: function (response) {

$('#status').html(response);

},

error: function () {

$('#status').text('An error occurred while uploading.');

}

});

});

</script>

</body>

</html>

Este es el frontal de nuestro cargador: un formulario básico con una entrada de archivo y un botón. También cargaremos jQuery para poder utilizar AJAX.

¿Qué ocurre aquí?

Estamos utilizando jQuery para escuchar el clic de un botón, coger el archivo seleccionado y enviarlo al servidor mediante AJAX. Esto evita que la página se recargue y proporciona una experiencia más fluida.

Paso 3: Gestionar la carga en PHP (upload.php)

Este script recibe el archivo desde AJAX y lo mueve a la carpeta uploads/.

<?php

if (isset($_FILES['file'])) {

$targetDir = "uploads/";

$filename = basename($_FILES["file"]["name"]);

$targetFilePath = $targetDir . $filename;

if (move_uploaded_file($_FILES["file"]["tmp_name"], $targetFilePath)) {

echo "File uploaded successfully: " . htmlspecialchars($filename);

} else {

echo "Failed to upload file.";

}

} else {

echo "No file received.";

}

?>

Paso 4: Probar la carga básica

• Navega hasta https://yourdomain.com/file-upload/index.html en tu navegador. En mi caso, me dirigiré a esta URL: https://wordpress-1070279-3883303.cloudwaysapps.com/file-upload/index.html.

• Selecciona un archivo y pulsa el botón Cargar.

• Deberías ver un mensaje de éxito, y el archivo debería aparecer en el directorio de subidas.

Aloja sitios web PHP con facilidad [A partir de 11 $ de crédito].

• Puesta en escena gratuita
• Copia de seguridad gratuita
• PHP 8.3
• Sitios web ilimitados

PRUEBA AHORA

Parte 2: Actualizar la carga de archivos (versión avanzada)

Ahora que ya hemos conseguido que funcione la subida básica de archivos, vamos a subir un poco el nivel. Lo que hemos construido antes era la «prueba de concepto»: sube un archivo y nos dice si ha funcionado (o no).

Eso está bien para empezar, pero en el mundo real necesitamos más control, seguridad y retroalimentación.

Así que en esta parte de la guía, vamos a mejorar nuestro cargador:

• Limitar los tipos de archivos (para que los usuarios no puedan subir cualquier cosa)
• Aplicar un límite de tamaño
• Desinfección de nombres de archivo (porque los usuarios pueden ser astutos)
• Mostrar una barra de progreso de subida en directo
• Mostrar una galería de archivos subidos
• Almacenar la información de los archivos en una base de datos (utilizaremos SQLite – más fácil que MySQL)
• Proteger la carpeta de subida
• Añadir opcionalmente reCAPTCHA para protección contra spam

Esta sección asume que ya has configurado tu proyecto con la versión básica (con index.html, upload.php y una carpeta uploads/). Si no lo has hecho, vuelve atrás y sigue primero la Parte 1.

Restringe las subidas a tipos de archivo específicos (imágenes y PDF)

Ahora mismo, los usuarios pueden subir cualquier archivo: .exe, .php, .zip, lo que quieras. Eso no es seguro. Lo arreglaremos comprobando el tipo MIME del archivo subido. Sólo se permitirán archivos JPEG, PNG, GIF y PDF .

Abre tu archivo upload.php y sustituye todo el código por esto:

<?php

if (isset($_FILES['file'])) {

$allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'application/pdf'];

$fileType = $_FILES["file"]["type"];

if (!in_array($fileType, $allowedTypes)) {

echo "Only JPG, PNG, GIF images and PDFs are allowed.";

exit;

}

$targetDir = "uploads/";

$filename = basename($_FILES["file"]["name"]);

$targetFilePath = $targetDir . $filename;

if (move_uploaded_file($_FILES["file"]["tmp_name"], $targetFilePath)) {

echo "File uploaded successfully: " . htmlspecialchars($filename);

} else {

echo "Failed to upload file.";

}

} else {

echo "No file received.";

}

?>

¿Qué ocurre aquí?

Comprobamos el tipo de archivo subido. Si no coincide con uno de los tipos de nuestra lista de permitidos, detenemos la subida y mostramos un mensaje.

¡Probemos!

Así, si intento subir un archivo no compatible, aparecerá un mensaje que dice «Sólo se permiten imágenes JPG, PNG, GIF y PDF».

Pero si subo un archivo PNG, por ejemplo, debería subirse enseguida.

Añadir un límite de tamaño de archivo (Máx. 5MB)

Para evitar que archivos enormes atasquen tu servidor, limitaremos las subidas a 5 MB.

Abre de nuevo tu upload.php, y antes de la línea move_uploaded_file(), añade este código:

$maxSize = 5 1024 1024; // 5MB

if ($_FILES["file"]["size"] > $maxSize) {

echo "File is too large. Max allowed size is 5MB.";

exit;

}

Así:

¿Por qué lo hacemos?

Un usuario podría subir accidentalmente (o intencionadamente) un vídeo de 200 MB. Este límite lo evita y ayuda a que tu sitio sea rápido y responda.

¡Probemos!

Para probarlo, añadiré una imagen de 10 MB de tamaño, superior al límite de 5 MB que añadimos.

En este caso, veré el mensaje «El archivo es demasiado grande. El tamaño máximo permitido es de 5 MB». Así

Limpia el nombre del archivo

Cuando los usuarios suben archivos, pueden ponerles cualquier nombre, desde algo inofensivo como foto_de_perfil.jpg hasta algo superdesordenado como:

../../../evil<script>.php

o

mi*currículum#final@@!!v9.pdf

No queremos que ese caos acabe en el sistema de archivos de nuestro servidor. No sólo tiene un aspecto desordenado, sino que puede abrir la puerta a vulnerabilidades de seguridad (como ataques path traversal, en los que alguien intenta saltar fuera de la carpeta prevista).

Para solucionarlo, podemos aplicar la limpieza de archivos.

Busca esta línea en upload.php:

$filename = basename($_FILES["file"]["name"]);

Y sustitúyelo por

$filename = preg_replace("/[^A-Za-z0-9\.\-_]/", '', basename($_FILES["file"]["name"]));

Para qué sirve:

Elimina cualquier carácter que no sea una letra, un número, un punto, un guión o un guión bajo. Esto mantiene las cosas limpias y evita que se exploten las rutas.

Echa un vistazo a la tabla siguiente para entenderlo mejor:

Nombre original del archivo	Después de la desinfección
mi curriculum v3 (final).pdf	micurriculumfinalv3.pdf
../../../secreto.php	secreto.php
hola@#mundo.jpg	hola@#mundo.jpg
factura_2024^%$.pdf	factura_2024.pdf

¡Probemos!

Para probar, vamos a subir un archivo llamado «raro^%$#@!.pdf».

Ahora, si vamos a la carpeta uploads, notarás cómo desaparecen todos los símbolos raros.

Añade una barra de progreso con jQuery + AJAX

Ahora mejoraremos la experiencia del usuario. En lugar de hacer clic en subir y esperar que ocurra algo, mostraremos el progreso en directo.

¿Por qué utilizar aquí jQuery y AJAX?

AJAX nos permite cargar el archivo en segundo plano sin recargar la página. jQuery facilita la sintaxis y la hace más limpia.

En tu index.html, busca la etiqueta<script> al final y sustitúyela entera por esto:

<script>

$('#uploadBtn').on('click', function () {

var file = $('#fileInput')[0].files[0];

if (!file) {

$('#status').text('Please select a file.');

return;

}

var formData = new FormData();

formData.append('file', file);

var xhr = new XMLHttpRequest();

xhr.open("POST", "upload.php", true);

xhr.upload.onprogress = function (e) {

if (e.lengthComputable) {

var percent = Math.round((e.loaded / e.total) * 100);

$('#status').html("Uploading: " + percent + "%");

}

};

xhr.onload = function () {

if (xhr.status == 200) {

$('#status').html(xhr.responseText);

} else {

$('#status').text('Upload failed.');

}

};

xhr.send(formData);

});

</script>

Comprueba el GIF a continuación:

¡Probemos!

Ahora, si subo un archivo, podemos ver una barra de progreso. Mira el GIF de abajo:

Ahora tus usuarios pueden ver el progreso de la subida en tiempo real para una experiencia mucho más fluida.

Mostrar todos los archivos subidos debajo del formulario

Ahora mostraremos una lista de todos los archivos subidos en una minigalería justo debajo de tu formulario de subida, y nos aseguraremos de que se actualice automáticamente cada vez que se suba un nuevo archivo.

Esta es una función estupenda si quieres que los usuarios (o tú mismo) vean la lista de archivos que ya están en tu carpeta/carpeta de subidas, sin necesidad de actualizar la página.

He aquí cómo podemos conseguirlo:

1. Abre index.html y debajo del div #status, añade esto:

<div id="gallery"></div>

2. Crea un nuevo archivo en la misma carpeta llamado list_uploads.php.

Y pega esto dentro:

<?php

$dir = 'uploads/';

$files = scandir($dir);

foreach ($files as $file) {

if ($file === '.' || $file === '..') continue;

echo "<p><a href='uploads/$file' target='_blank'>$file</a></p>";

}

?>

3. Vuelve a tu script<> en index.html, y actualiza la parte xhr.onload así:

xhr.onload = function () {

if (xhr.status == 200) {

$('#status').html(xhr.responseText);

$('#gallery').load('list_uploads.php');

} else {

$('#status').text('Upload failed.');

}

};

¿Qué ocurre ahora?

Cada vez que se sube un archivo, la lista que hay debajo del formulario se actualiza con un enlace clicable a ese archivo.

¿Funcionan mal las subidas de archivos PHP?

Comparte tu código y recibe comentarios instantáneos de los desarrolladores en la Comunidad Reddit de Cloudways.

👉 Únete a nosotros en Reddit

¡Terminando!

Con esto terminamos nuestra guía de carga de archivos PHP. Ahora tienes una función de subida de archivos que funciona usando PHP y jQuery AJAX, con mejoras útiles como la validación, una barra de progreso y una galería en vivo.

Estos pequeños pero importantes detalles contribuyen en gran medida a que las subidas resulten fiables y fluidas para los usuarios. Si planeas construir sobre esto, tienes un punto de partida sólido desde el que crecer.