JavaScript File et FileReader

Dans le paysage actuel du développement web, la gestion efficace et sécurisée des fichiers est essentielle. JavaScript, langage clé du scripting côté client, met à disposition des outils robustes via les interfaces File et FileReader. Ce guide propose un aperçu détaillé de ces outils, offrant aux développeurs les compétences nécessaires pour manipuler les fichiers en toute fluidité au sein des applications web.

Comprendre l'interface File en JavaScript

L'interface File en JavaScript est un objet représentant les données d'un fichier. Les fichiers proviennent généralement des éléments <input type="file">, des opérations de Glisser-Déposer (Drag and Drop) ou de l'API Clipboard. Cette interface fournit des informations standard telles que le nom, la taille et le type MIME, ainsi que des méthodes pour accéder au contenu du fichier.

Propriétés clés de l'interface File

• name : Le nom du fichier sous forme de chaîne.
• size : La taille du fichier en octets.
• type : Le type MIME du fichier sous forme de chaîne.

Exemple : Affichage des informations sur un fichier

Voici une méthode simple pour afficher les informations d'un fichier sélectionné par l'utilisateur :

---

<input type="file" id="fileInput" />
<div id="fileInfo"></div>

document.getElementById('fileInput').addEventListener('change', function(event) {
  const file = event.target.files[0];
  const info = `File Name: ${file.name} <br> File Size: ${file.size} bytes<br> File Type: ${file.type}`;
  document.getElementById('fileInfo').innerHTML = info;
});

Try it Yourself »

Exploiter l'API FileReader

L'API FileReader permet aux applications web de lire le contenu des fichiers (ou des tampons de données brutes) stockés sur l'ordinateur de l'utilisateur, en utilisant des objets File ou Blob pour spécifier le fichier ou les données à lire.

Méthodes de FileReader

• readAsDataURL() : Lit le fichier sous forme d'URL de données.
• readAsText() : Lit le fichier sous forme de texte.
• readAsArrayBuffer() : Lit le fichier sous forme d'ArrayBuffer.

Exemple : Lecture d'un fichier texte

L'exemple suivant montre comment lire un fichier texte à l'aide de FileReader et afficher son contenu sur la page web :

---

<input type="file" id="textInput" />
<div id="textOutput">Upload a text file please</div>

document.getElementById('textInput').addEventListener('change', function(event) {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onload = function(e) {
    document.getElementById('textOutput').innerHTML = e.target.result;
  };
  reader.onerror = function() {
    document.getElementById('textOutput').innerHTML = 'Error reading file.';
  };
  reader.readAsText(file);
});

Try it Yourself »

Lecture avancée de fichiers : Gestion des différents types de données

Lecture d'images sous forme d'URL de données

Pour afficher un fichier image sélectionné par l'utilisateur, vous pouvez le lire en tant qu'URL de données en utilisant la méthode readAsDataURL. Cette méthode encode le fichier en une chaîne encodée en base64, qui peut être utilisée directement dans les éléments d'image.

Exemple : Affichage d'une image

---

<input type="file" id="imageInput" />
<div>Select an image file, please.</div>
<img id="imageDisplay" />

document.getElementById('imageInput').addEventListener('change', function(event) {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onload = function(e) {
    document.getElementById('imageDisplay').src = e.target.result;
  };
  reader.onerror = function() {
    document.getElementById('imageDisplay').style.display = 'none';
    alert('Error reading image file.');
  };
  reader.readAsDataURL(file);
});

Try it Yourself »

Lecture de fichiers binaires avec ArrayBuffer

Pour les applications qui doivent traiter de l'audio, de la vidéo ou tout autre type de données binaires, la lecture du fichier sous forme d'ArrayBuffer est essentielle. Cette méthode fournit un tampon générique de données binaires, qui peut être manipulé ou transmis à d'autres API comme Web Audio ou WebGL.

Exemple : Traitement de données binaires

---

<input type="file" id="binaryInput" />
<div id="binaryOutput">Select any file.</div>

document.getElementById('binaryInput').addEventListener('change', function(event) {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onload = function(e) {
    const buffer = e.target.result;
    // Process the binary data
    const info = `Buffer Length: ${buffer.byteLength} bytes`;
    document.getElementById('binaryOutput').innerHTML = info;
  };
  reader.onerror = function() {
    document.getElementById('binaryOutput').innerHTML = 'Error reading binary file.';
  };
  reader.readAsArrayBuffer(file);
});

Try it Yourself »

Conclusion

En comprenant et en implémentant les interfaces File et FileReader en JavaScript, les développeurs peuvent améliorer l'interaction de leurs applications web avec les données des utilisateurs. Ces API fournissent les outils nécessaires pour gérer les entrées de fichiers, lire leur contenu et exploiter les données efficacement, garantissant ainsi une expérience utilisateur plus riche et plus interactive.

Remarque : Les navigateurs modernes prennent également en charge file.text() et file.arrayBuffer() pour une lecture asynchrone plus simple, sans recourir à l'API FileReader.

Pratique

Quelles sont les fonctionnalités des interfaces File et FileReader en JavaScript ?

L'interface File fournit des informations sur les fichiers.L'interface FileReader facilite la lecture asynchrone de fichiers stockés sur l'ordinateur de l'utilisateur par une application web.L'interface File permet de sauvegarder des fichiers sur l'ordinateur de l'utilisateur.L'interface FileReader peut créer de nouveaux fichiers dans le système de fichiers.