Comment lire des fichiers locaux en HTML

En HTML, lisez les fichiers locaux via l'API File. Les étapes comprennent : Créer un sélecteur de fichiers à l'aide de l'élément <input> Ajoutez un écouteur d'événements au sélecteur de fichiers. Dans le gestionnaire d'événements, utilisez un objet FileReader pour lire le fichier. Après une lecture réussie, l'attribut result contient le contenu du fichier et peut être traité selon les besoins.

Comment lire des fichiers locaux en utilisant HTML

En HTML, la lecture de fichiers locaux se fait principalement à l'aide de l'API File. L'API File est un ensemble d'API JavaScript qui permettent aux pages Web de lire des fichiers à partir des appareils des utilisateurs.

Étapes requises :

1. Créez un sélecteur de fichiers à l'aide de l'élément <input> : <input> 元素创建文件选择器：

   <input type="file">

<input type="file">

2. Ajouter un écouteur d'événement au sélecteur de fichiers :

3. const input = document.querySelector('input[type="file"]');
   input.addEventListener('change', handleFileSelect);

   Lire le fichier dans le gestionnaire d'événements :

function handleFileSelect(event) {
  const files = event.target.files;
  const reader = new FileReader();
  reader.onload = function() {
    // 读取成功后，`result` 属性将包含文件的内容。
    const content = reader.result;

    // 对文件内容执行所需的处理。
  };
  reader.readAsText(files[0]);
}

Exemple de code :

<form>
  <input type="file" id="file-input">
  <button type="submit">读取文件</button>
</form>

<script>
  const input = document.querySelector('input[type="file"]');

  input.addEventListener('change', function(event) {
    const files = event.target.files;
    const reader = new FileReader();

    reader.onload = function() {
      const content = reader.result;

      console.log(content);
    };

    reader.readAsText(files[0]);
  });
</script>

Remarques :

• L'API de fichiers ne fonctionne qu'avec les navigateurs HTML5.
• La lecture de fichiers locaux nécessite une autorisation explicite de l'utilisateur.
• Les navigateurs ont des limites spécifiques sur la taille et le type de fichiers.

Utilisez l'API File avec prudence car cela peut présenter des risques de sécurité. 🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!