¡Hola! Hoy te ayudaré a crear un sistema sencillo y cómodo para cargar archivos con visualización del progreso en JavaScript. Esta funcionalidad es útil cuando el usuario necesita cargar archivos grandes y es importante ver cómo ha avanzado el proceso.
Analicemos este proceso paso a paso, con explicaciones detalladas de cada paso.
Paso 1. Crear un formulario HTML para cargar archivos
En primer lugar, necesitamos crear un formulario que permita al usuario seleccionar un archivo para descargar. En HTML, esto se hace usando el elemento <input> con el tipo file.
Plantilla HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Upload with Progress</title>
</head>
<body>
<h1>Загрузка файла с прогрессом</h1>
<form id="uploadForm">
<input type="file" id="fileInput" name="file" />
<button type="submit">Загрузить файл</button>
</form>
<!-- Прогресс-бар -->
<progress id="progressBar" value="0" max="100" style="width: 100%;"></progress>
<!-- Результат -->
<div id="status"></div>
<script src="script.js"></script>
</body>
</html>
📋 Explicación:
El elemento
<input type="file">permite al usuario seleccionar un archivo para cargar.La barra de progreso
<progress>muestra el porcentaje de carga del archivo.El elemento
<div id="status">se utilizará para mostrar mensajes sobre el estado de la carga (éxito o error).
Paso 2. Añadir un controlador de eventos de formulario
Cuando el usuario selecciona un archivo y hace clic en el botón "Cargar", debemos interceptar este evento y transferir el archivo al servidor. Para ello, añadiremos un controlador de formularios y cancelaremos su comportamiento estándar (recargar la página).
Agreguemos un controlador a script.js:
document.getElementById('uploadForm').addEventListener('submit', function (event) {
event.preventDefault(); // Cancelar el comportamiento estándar del formulario
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
if (file) {
uploadFile(file); // Pasamos el archivo a la función para cargarlo
} else {
alert('Please select a file.');
}
});
🛑 ¿Qué está pasando aquí?:
Estamos escuchando el evento
submiten el formulario.Cancelamos el comportamiento estándar de envío de formularios.
Comprobamos si el usuario ha seleccionado un archivo y, en caso afirmativo, llamamos a la función para cargar el archivo
uploadFile().
Paso 3. Configuración de la descarga de archivos usando XMLHttpRequest
Ahora pasemos a la parte principal: cargar un archivo en el servidor con seguimiento del progreso. Para ello, utilizaremos el objeto XMLHttpRequest, que nos permite enviar archivos y recibir información sobre el progreso de la carga.
Implementación de la función uploadFile:
function uploadFile(file) {
const xhr = new XMLHttpRequest(); // Creamos un nuevo XMLHttpRequest
const formData = new FormData(); // Usamos FormData para enviar un archivo
formData.append('file', file); // Añadir un archivo a un objeto FormData
// Controlador para el seguimiento del progreso de la carga
xhr.upload.addEventListener('progress', function (event) {
if (event.lengthComputable) {
const percentComplete = (event.loaded / event.total) * 100;
document.getElementById('progressBar').value = percentComplete; // Actualizando la barra de progreso
}
});
// Controlador en caso de carga exitosa
xhr.addEventListener('load', function () {
if (xhr.status === 200) {
document.getElementById('status').textContent = 'File uploaded successfully!';
} else {
document.getElementById('status').textContent = 'Error loading file.';
}
});
// Controlador de errores
xhr.addEventListener('error', function () {
document.getElementById('status').textContent = 'An error occurred while uploading the file.';
});
xhr.open('POST', '/upload'); // Indicamos el método y la URL para enviar el archivo
xhr.send(formData); // Enviando datos
}
📦 Análisis del trabajo:
Creación
XMLHttpRequest: Este objeto es responsable de enviar solicitudes HTTP.FormData: UsamosFormDatapara empaquetar los datos del archivo que se enviarán al servidor.Seguimiento del progreso: Usamos el evento
progresspara rastrear la cantidad de bytes cargados en el servidor y actualizar nuestra barra de progreso.Procesamiento de finalización de carga: Si la carga se realizó correctamente (estado
200), mostramos un mensaje sobre la carga exitosa, de lo contrario, mostramos un mensaje de error.Tratamiento de errores: Rastrear un error durante la carga y notificar al usuario en caso de fallo.
Paso 4. Configuración del servidor para procesar el archivo
Para completar nuestro proyecto, debemos configurar un servidor que acepte el archivo. Como ejemplo, puedes usar un servidor Node.js usando la biblioteca express y el paquete multer, que ayuda a procesar los archivos descargados.
Ejemplo de servidor Node.js:
const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();
const upload = multer({ dest: 'uploads/' }); // Indicamos la carpeta para cargar archivos
// Ruta para cargar el archivo
app.post('/upload', upload.single('file'), (req, res) => {
if (!req.file) {
return res.status(400).send('File was not uploaded.');
}
res.send('File uploaded successfully!');
});
app.listen(3000, () => {
console.log('Server running on port 3000');
});
🌍 Explicación:
Utilizamos la biblioteca
multerpara procesar archivos cargados.El servidor acepta el archivo, lo carga en la carpeta especificada (
uploads/) y devuelve la respuesta al cliente.
Paso 5. Prueba
Ahora que hemos configurado tanto el lado del cliente como el del servidor, podemos probar la descarga de archivos. Inicia el servidor, abre la página con el formulario de descarga, selecciona el archivo y verás cómo se llena la barra de progreso a medida que se carga el archivo.
Conclusión
Cargar un archivo con una barra de progreso es una excelente manera de mejorar la experiencia del usuario, especialmente cuando se trabaja con archivos grandes. El usuario ve cómo avanza el proceso, lo que hace que su interacción con la aplicación sea más clara y transparente.
Si tienes alguna pregunta o quieres añadir funciones adicionales, como la compatibilidad con varios archivos o la visualización del tiempo restante, ¡haznos saber! 👨💻