Comment puis-je lire un fichier texte local dans un navigateur Web ?

Comment lire un fichier texte local dans le navigateur

Lorsque vous essayez d'implémenter un simple lecteur de fichier texte à l'aide de XMLHttpRequest, il peut ne pas fonctionner correctement. Cet article explore les problèmes potentiels et propose des solutions pour les corriger.

XMLHttpRequest Exception 101

Lorsqu'une requête XMLHttpRequest est effectuée avec un chemin de fichier local, elle peut entraîner une exception 101. Cela se produit car les navigateurs modernes restreignent strictement l’accès direct au système de fichiers. Pour contourner cela, évitez d'utiliser les chemins file:///.

API Fetch (alternative à XMLHttpRequest)

Une approche plus moderne et conviviale pour récupérer des données à partir d'URL est l'API Fetch, introduit dans JS. Le code suivant démontre son utilisation :

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

Configuration XMLHttpRequest pour les fichiers locaux

Pour les demandes de fichiers locaux utilisant XMLHttpRequest, il est nécessaire de vérifier à la fois les statuts 0 et 200 car le statut n'est pas renvoyé par un serveur Web :

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

Quand en utilisant XMLHttpRequest avec des fichiers locaux, il est impératif de préciser le protocole file:// dans le nom 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!