Comment lire des fichiers texte locaux en HTML

Le HTML lui-même ne peut pas lire directement les fichiers locaux, mais il peut être résolu par les méthodes suivantes : Utilisation de l'API FileReader : utilisez la méthode readAsText() de l'API FileReader pour lire le contenu du fichier texte. Utilisation de XMLHttpRequest : utilisez XMLHttpRequest (XHR) pour envoyer une requête HTTP au serveur afin de lire un fichier local. Utilisation de l'API Fetch : utilisez l'API Fetch pour envoyer des requêtes HTTP, similaires à XMLHttpRequest, mais en offrant une méthode plus moderne.

Comment lire des fichiers texte locaux en HTML

HTML lui-même ne peut pas accéder directement au système de fichiers local. Cependant, nous pouvons résoudre ce problème en :

Utilisation de l'API FileReader

L'API FileReader fournit readAsText()une méthode qui peut être utilisée pour lire le contenu d'un fichier texte :

<input type="file" id="file-input">

<script>
  const fileInput = document.getElementById('file-input');
  fileInput.addEventListener('change', (e) => {
    const file = e.target.files[0];
    const reader = new FileReader();
    reader.onload = (e) => {
      const text = e.target.result;
      // 使用 text
    };
    reader.readAsText(file);
  });
</script>

Utilisation de XMLHttpRequest

XMLHttpRequest (XHR) est un An API qui interagit avec le serveur via des requêtes HTTP. Nous pouvons l'utiliser pour lire des fichiers locaux :

<script>
  const request = new XMLHttpRequest();
  request.open('GET', 'local-file.txt');
  request.onload = () => {
    const text = request.responseText;
    // 使用 text
  };
  request.send();
</script>

Utilisation de l'API Fetch

L'API Fetch est une alternative à XHR et fournit une manière plus moderne de gérer les requêtes HTTP :

<script>
  fetch('local-file.txt')
  .then(response => response.text())
  .then(text => {
    // 使用 text
  })
  .catch(error => {
    // 处理错误
  });
</script>

REMARQUE : pour des raisons de sécurité, ces méthodes peuvent lisez uniquement les fichiers texte de la même source (domaine, protocole et port).

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!