Comment puis-je lire efficacement des fichiers texte locaux dans un navigateur Web ?

Lecture de fichiers texte locaux dans le navigateur

XMLHttpRequest est une méthode couramment utilisée pour la récupération de données asynchrones dans le navigateur, mais elle peut parfois rencontrer problèmes lors de la tentative de lecture de fichiers texte locaux.

Problèmes avec XMLHttpRequest

Une erreur courante est l'exception XMLHttpRequest 101, qui indique que la demande a été abandonnée. Cela peut se produire lorsque vous tentez de lire des fichiers locaux sans spécifier le protocole "file://".

Alternative : Fetch API

Une manière plus simple de lire du texte local les fichiers s'effectuent via l'API Fetch, introduite en 2015. Exemple de code utilisant l'API Fetch pour lire un fichier local nommé "myText.txt":

fetch("myText.txt")
  .then((res) => res.text())
  .then((text) => {
    // Process the text data
  })
  .catch((e) => console.error(e));

Accès aux fichiers locaux

Les navigateurs modernes imposent des restrictions strictes sur l'accès direct au système de fichiers. Évitez d'utiliser "file:///". Au lieu de cela, envisagez d'utiliser des serveurs Web légers comme Python -m http.server ou npx http-server pour charger des données via des URL HTTP classiques.

Exemple de code avec XMLHttpRequest

Si vous utilisez XMLHttpRequest, vérifie manuellement le statut 0 (indiquant les fichiers locaux) au lieu de s'appuyer sur un statut renvoyé code :

function readTextFile(file) {
  var rawFile = new XMLHttpRequest();
  rawFile.open("GET", file, false);
  rawFile.onreadystatechange = function () {
    if (rawFile.readyState === 4) {
      if (rawFile.status === 200 || rawFile.status === 0) {
        var allText = rawFile.responseText;
        console.log(allText);
      }
    }
  };
  rawFile.send(null);
}

Spécification du chemin du fichier

N'oubliez pas d'inclure le protocole "file://" lors de la spécification du chemin du fichier :

readTextFile("file:///C:/your/path/to/file.txt");

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!