Bonjour ! Aujourd'hui, je vais vous aider à créer un système simple et pratique pour télécharger des fichiers avec affichage de la progression en JavaScript. Cette fonctionnalité est utile lorsque l'utilisateur doit télécharger des fichiers volumineux et qu'il est important de voir l'avancement du processus.
Décomposons ce processus étape par étape, avec des explications détaillées de chaque étape.
Étape 1. Création d'un formulaire HTML pour le téléchargement de fichiers
Tout d'abord, nous devons créer un formulaire qui permettra à l'utilisateur de sélectionner un fichier à télécharger. En HTML, cela se fait à l'aide de l'élément <input> avec le type file.
Modèle 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>
📋 Explication:
L'élément
<input type="file">permet à l'utilisateur de sélectionner un fichier à télécharger.La barre de progression
<progress>affiche le pourcentage de chargement du fichier.L'élément
<div id="status">sera utilisé pour afficher les messages d'état de chargement (succès ou erreur).
Étape 2. Ajout d'un gestionnaire d'événements de formulaire
Lorsqu'un utilisateur sélectionne un fichier et clique sur le bouton « Télécharger », nous devons intercepter cet événement et transférer le fichier vers le serveur. Pour ce faire, nous allons ajouter un gestionnaire de formulaire et annuler son comportement standard (rechargement de la page).
Ajoutons un gestionnaire à script.js :
document.getElementById('uploadForm').addEventListener('submit', function (event) {
event.preventDefault(); // Annulation du comportement standard du formulaire
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
if (file) {
uploadFile(file); // Nous transmettons le fichier à la fonction de téléchargement
} else {
alert('Please select a file.');
}
});
🛑 Que se passe-t-il ici:
Nous écoutons l'événement
submitsur le formulaire.Annuler le comportement d'envoi de formulaire standard.
On vérifie si l'utilisateur a sélectionné un fichier et, si oui, on appelle la fonction pour télécharger le fichier
uploadFile().
Étape 3. Configuration du téléchargement de fichiers à l'aide de XMLHttpRequest
Passons maintenant à la partie principale : le téléchargement d'un fichier sur le serveur avec suivi de la progression. Pour cela, nous utiliserons l'objet XMLHttpRequest, qui nous permet d'envoyer des fichiers et de recevoir des informations sur la progression du téléchargement.
Implémentation de la fonction uploadFile :
function uploadFile(file) {
const xhr = new XMLHttpRequest(); // Créons un nouveau XMLHttpRequest
const formData = new FormData(); // Nous utilisons FormData pour envoyer un fichier
formData.append('file', file); // Ajout d'un fichier à l'objet FormData
// Gestionnaire pour suivre la progression du chargement
xhr.upload.addEventListener('progress', function (event) {
if (event.lengthComputable) {
const percentComplete = (event.loaded / event.total) * 100;
document.getElementById('progressBar').value = percentComplete; // Mise à jour de la barre de progression
}
});
// Gestionnaire en cas de chargement réussi
xhr.addEventListener('load', function () {
if (xhr.status === 200) {
document.getElementById('status').textContent = 'File uploaded successfully!';
} else {
document.getElementById('status').textContent = 'Error loading file.';
}
});
// Gestionnaire d'erreurs
xhr.addEventListener('error', function () {
document.getElementById('status').textContent = 'An error occurred while uploading the file.';
});
xhr.open('POST', '/upload'); // Indiquez la méthode et l'URL pour envoyer le fichier
xhr.send(formData); // Envoi des données
}
📦 Analyse du travail:
Création
XMLHttpRequest: Cet objet est responsable de l'envoi des requêtes HTTP.FormData: Nous utilisonsFormDatapour emballer les données du fichier qui seront envoyées au serveur.Suivi des progrès: Nous utilisons l'événement
progresspour suivre le nombre d'octets téléchargés sur le serveur et mettre à jour notre barre de progression.Traitement de la fin du chargement: Si le chargement a réussi (statut
200), nous affichons un message de chargement réussi, sinon nous affichons un message d'erreur.Traitement des erreurs: Nous suivons l'erreur lors du chargement et informons l'utilisateur en cas d'échec.
Étape 4. Configuration du serveur pour le traitement du fichier
Pour terminer notre projet, vous devez configurer un serveur qui recevra le fichier. À titre d'exemple, vous pouvez utiliser un serveur Node.js utilisant la bibliothèque express et le paquet multer, qui aide à traiter les fichiers téléchargés.
Exemple de serveur Node.js :
const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();
const upload = multer({ dest: 'uploads/' }); // Indiquez le dossier pour télécharger les fichiers
// Itinéraire pour le téléchargement du fichier
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');
});
🌍 Explication:
Nous utilisons la bibliothèque
multerpour traiter les fichiers téléchargés.Le serveur accepte le fichier, le télécharge dans le dossier spécifié (
uploads/) et renvoie la réponse au client.
Étape 5. Test
Maintenant que nous avons configuré le côté client et le côté serveur, nous pouvons tester le téléchargement de fichiers. Démarrez le serveur, ouvrez la page avec le formulaire de téléchargement, sélectionnez un fichier et vous verrez la barre de progression se remplir au fur et à mesure du téléchargement du fichier.
Conclusion
Le téléchargement d'un fichier avec une barre de progression est un excellent moyen d'améliorer l'expérience utilisateur, en particulier lorsque vous travaillez avec des fichiers volumineux. L'utilisateur voit comment le processus progresse, ce qui rend son interaction avec l'application plus compréhensible et transparente.
Si vous avez des questions ou si vous souhaitez ajouter des fonctionnalités supplémentaires, telles que la prise en charge de plusieurs fichiers ou l'affichage du temps restant, faites-le nous savoir ! 👨💻