Comment lire des fichiers en Javascript ?
Bienvenue dans ce tutoriel où nous vous montrons comment lire des fichiers en JavaScript.
Pourquoi avez-vous besoin de lire des fichiers en utilisant JavaScript ?
Lire des fichiers en JavaScript est une opération courante et utile pour plusieurs raisons :
1. Interaction utilisateur : Choix de fichiers locaux, essentiel pour le téléchargement, le chargement de photos, etc.
2. Gestion de fichiers : Lecture de contenu, opérations sur les données.
3. Traitement de données : Analyse, calculs sur les fichiers (CSV, configuration).
4. Personnalisation : Adaptation de l’expérience utilisateur en fonction des fichiers sélectionnés.
5. Téléchargements : Génération de fichiers, rapports, exportation de données.
6. Applications Web avancées : Éditeurs de texte, outils de retouche d’images, gestionnaires de fichiers.
7. Intégration d’API : Intégration d’API externes, opérations de gestion de fichiers dans le navigateur.
Sélectionner les fichiers
La méthode la plus simple pour autoriser les utilisateurs à choisir des fichiers consiste à utiliser l’élément `<input type=”file”>`, un élément pris en charge par tous les principaux navigateurs. Lorsque l’utilisateur clique dessus, il peut choisir un fichier, voire plusieurs fichiers s’il utilise l’attribut `multiple`, en utilisant l’interface de sélection de fichier intégrée à son système d’exploitation. Une fois que l’utilisateur a terminé sa sélection, l’événement de changement est déclenché. Les fichiers sélectionnés peuvent être consultés via `event.target.files`, qui renvoie un objet FileList. Chaque élément de la FileList est un objet File.
Exemple :
Imaginons que vous développez une application Web pour le partage de photos. Vous souhaitez permettre aux utilisateurs de télécharger plusieurs images à la fois. Vous pouvez inclure un champ `<input type=”file>` avec l’attribut `multiple` dans votre formulaire HTML :
<form>
<input type="file" id="fileInput" multiple />
</form>Ensuite, vous pouvez utiliser JavaScript pour détecter lorsque l’utilisateur a sélectionné des fichiers et accéder à la liste des fichiers sélectionnés :
const fileInput = document.getElementById(‘fileInput’);
fileInput.addEventListener(‘change’, function (event) {
const selectedFiles = event.target.files;
for (let i = 0; i < selectedFiles.length; i++) {
const file = selectedFiles[i];
console.log(‘Nom du fichier :’, file.name);
console.log(‘Taille du fichier (en octets) :’, file.size);
console.log(‘Type de fichier :’, file.type);
}
});
`
Ainsi, votre application permet aux utilisateurs de sélectionner plusieurs fichiers, de consulter leurs noms, tailles et types, ce qui facilite le partage de photos ou d’autres fichiers.
Utilisation de l’élément de saisie HTML
Limiter les types de fichiers que l’utilisateur peut sélectionner
Il peut arriver que vous ayez besoin de restreindre les types de fichiers que les utilisateurs peuvent sélectionner dans certaines situations. Par exemple, une application de retouche d’images devrait uniquement accepter les fichiers image et pas les fichiers texte. Pour ce faire, vous avez la possibilité d’utiliser l’attribut `accept` sur l’élément `<input>` pour spécifier quels types de fichiers sont autorisés.
Exemple :
Supposons que vous développiez une application de téléchargement de photos. Vous souhaitez que les utilisateurs puissent uniquement sélectionner des fichiers image (tels que JPEG ou PNG) et non des fichiers texte. Vous pouvez modifier votre champ `<input type=”file>` de la manière suivante :
<form>
<input type="file" id="fileInput" accept="image/*" />
</form>En incluant l’attribut `accept` avec la valeur `”image/*”`, vous indiquez que seuls les fichiers image sont autorisés. Les utilisateurs ne pourront sélectionner que des fichiers conformes à ces critères.
L’utilisation de l’attribut `accept` est un moyen efficace de contrôler les types de fichiers que les utilisateurs peuvent télécharger, garantissant ainsi que seuls les fichiers appropriés sont acceptés par votre application.
Utiliser une zone glisser-déposer
Pour permettre à un élément d’agir comme une zone de glisser-déposer, vous devrez surveiller deux événements, à savoir le glisser et le déposer. L’événement Dragover est utilisé pour mettre à jour l’interface utilisateur du navigateur, signalant visuellement que l’action de glisser-déposer crée une copie du fichier. L’action de dépôt est activée dès que l’utilisateur a déposé les fichiers dans la zone.
De manière similaire à un champ d’entrée classique, vous pouvez accéder à la liste des fichiers glissés et déposés en utilisant `event.dataTransfer.files`, qui renvoie un objet FileList. Chaque élément de cette FileList est un objet File.
Exemple :
Supposons que vous développez une application Web de gestion de fichiers qui permet aux utilisateurs de glisser-déposer des fichiers dans une zone spécifique. Vous pouvez configurer cette zone de la manière suivante :
<div id="zoneDeDepot">
Faites glisser et déposez vos fichiers ici.
</div>Ensuite, vous pouvez ajouter des gestionnaires d’événements en JavaScript pour gérer les événements de glisser et déposer :
const zoneDeDepot = document.getElementById(‘zoneDeDepot’);
zoneDeDepot.addEventListener(‘dragover’, function (event) {
event.preventDefault();
// Mettre à jour l’interface utilisateur pour indiquer le support du glisser-déposer
});
zoneDeDepot.addEventListener(‘drop’, function (event) {
event.preventDefault();
const fichiersDeposes = event.dataTransfer.files;
for (let i = 0; i < fichiersDeposes.length; i++) {
const fichier = fichiersDeposes[i];
console.log(‘Nom du fichier :’, fichier.name);
console.log(‘Taille du fichier (en octets) :’, fichier.size);
console.log(‘Type de fichier :’, fichier.type);
}
// Gérer les fichiers déposés
});
Lire les métadonnées du fichier
L’objet File renferme une gamme de propriétés de métadonnées relatives au fichier. La plupart des navigateurs mettent à disposition le nom du fichier, sa taille en octets et son type MIME. Cependant, il est important de noter que selon la plate-forme ou le navigateur utilisé, certaines informations peuvent varier ou être complétées.
Exemple :
Lorsqu’un utilisateur télécharge un fichier sur un site Web, vous pouvez accéder aux métadonnées de ce fichier en utilisant l’objet File. Par exemple, voici comment vous pourriez afficher le nom, la taille et le type MIME d’un fichier téléchargé :
// Supposons que "fichier" soit un objet File représentant le fichier téléchargé
console.log('Nom du fichier :', fichier.name);
console.log('Taille du fichier (en octets) :', fichier.size);
console.log('Type de fichier (MIME) :', fichier.type);
Cela permet d’extraire les informations essentielles concernant le fichier téléchargé, comme son nom, sa taille et son type, ce qui peut être utile pour effectuer diverses opérations, telles que la vérification de la conformité du fichier ou son traitement ultérieur.
Lire le contenu d’un fichier
Pour accéder au contenu d’un fichier, vous pouvez utiliser l’objet FileReader, qui vous offre la possibilité de lire les données d’un fichier en mémoire. Vous pouvez demander à FileReader de lire un fichier sous différentes formes, telles qu’un tampon de tableau, une URL de données ou du texte.
Exemple :
Imaginons que vous souhaitiez créer une fonction en JavaScript qui permet aux utilisateurs de charger un fichier texte et d’en afficher le contenu. Voici comment vous pourriez le faire en utilisant FileReader :
<input type="file" id="fileInput">
<div id="output"></div>
<script>
const fileInput = document.getElementById('fileInput');
const output = document.getElementById('output');
fileInput.addEventListener('change', function () {
const selectedFile = fileInput.files[0];
const reader = new FileReader();
reader.onload = function (event) {
const contenuFichier = event.target.result;
output.textContent = contenuFichier;
};
reader.readAsText(selectedFile);
});
</script>
Dans cet exemple, l’utilisateur peut sélectionner un fichier texte à l’aide du champ de fichier. Une fois le fichier choisi, FileReader est utilisé pour lire son contenu en tant que texte, puis le contenu est affiché dans la zone d’affichage avec l’ID “output”.
Autres articles
