Excel

Comment obtenir le nom, la taille et le type d’un fichier en javascript ?

À l’issue de ce tutoriel, vous serez capable d’obtenir le nom, le type et la taille d’un fichier avant de l’envoyer au serveur, en utilisant javascript.

Contexte

L’une des fonctionnalités les plus couramment exploitées du Web est la capacité de choisir des fichiers locaux sur l’appareil de l’utilisateur et d’interagir avec eux. Cette fonctionnalité permet aux utilisateurs de sélectionner des fichiers, de les télécharger sur un serveur (par exemple, pour télécharger des photos ou envoyer des documents fiscaux, etc.), mais elle offre également la possibilité aux sites Web de les lire et de les manipuler sans avoir à transférer les données sur le réseau.

Comment Obtenir les Détails d’un Fichier en JavaScript ?

L’interaction avec des fichiers locaux sur le navigateur est une fonctionnalité essentielle. Voici comment obtenir des informations sur un fichier avant de l’envoyer ou de l’utiliser dans une application web :

Créez un Formulaire avec un Champ de Fichier

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

Ajoutez un Gestionnaire d’Événement pour la Sélection de Fichier

const fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', function () {
  // Le code pour obtenir les détails du fichier sera placé ici
});

Récupérez le Fichier Sélectionné

À l’intérieur de l’événement de changement, accédez au fichier sélectionné avec fileInput.files[0].

const selectedFile = fileInput.files[0];

Obtenez les Détails du Fichier

Pour obtenir le nom, la taille et le type du fichier, accédez aux propriétés de l’objet File. Voici comment :

Nom du Fichier :

  const fileName = selectedFile.name;

Taille du Fichier (en octets) :

  const fileSize = selectedFile.size;

Type de Fichier (type MIME) :

  const fileType = selectedFile.type;

Utilisez les Informations du Fichier Selon Vos Besoins

Tester dans l’environnement Javascript

Vous pouvez utiliser ces informations pour afficher le nom du fichier à l’utilisateur ou effectuer des opérations basées sur le type ou la taille du fichier. Par exemple, vous pourriez vérifier si le fichier est dans un format attendu ou s’il dépasse une certaine taille.

Exemple Complet :

<!DOCTYPE html>
<html>
  <head>
    <title>Obtenir les Détails d'un Fichier</title>
  </head>
  <body>
    <form>
      <input type="file" id="fileInput" />
    </form>
    <script>
      const fileInput = document.getElementById('fileInput');

      fileInput.addEventListener('change', function () {
        const selectedFile = fileInput.files[0];

        if (selectedFile) {
          const fileName = selectedFile.name;
          const fileSize = selectedFile.size;
          const fileType = selectedFile.type;

          console.log('Nom du Fichier :', fileName);
          console.log('Taille du Fichier (en octets) :', fileSize);
          console.log('Type de Fichier :', fileType);
        }
      });
    </script>
  </body>
</html>

Ces étapes simples fournissent des informations utiles sur les fichiers sélectionnés par l’utilisateur pour diverses applications web.

Une variante de code

Voici une variante du code JavaScript pour obtenir les détails d’un fichier avec une structure HTML légèrement différente.

<!DOCTYPE html>
<html>
  <head>
    <title>Obtenir les détails d'un fichier</title>
  </head>
  <body>
    <form>
      <label for="fileInput">Sélectionnez un fichier :</label>
      <input type="file" id="fileInput" />
    </form>
    <script>
      const fileInput = document.getElementById('fileInput');

      fileInput.addEventListener('change', function () {
        const selectedFile = fileInput.files[0];

        if (selectedFile) {
          const fileName = selectedFile.name;
          const fileSize = selectedFile.size;
          const fileType = selectedFile.type;

          console.log('Nom du fichier :', fileName);
          console.log('Taille du fichier (en octets) :', fileSize);
          console.log('Type de fichier :', fileType);
        }
      });
    </script>
  </body>
</html>

Dans cette variante, nous avons ajouté une étiquette (label) pour le champ de fichier (input), ce qui permet d’améliorer l’accessibilité et la convivialité de la page web en fournissant une indication claire à l’utilisateur sur l’utilisation du champ de fichier. Cela rend l’expérience utilisateur plus conviviale et conforme aux meilleures pratiques en matière de conception de formulaires web.