Comment puis-je lire de manière fiable un fichier texte local dans un navigateur Web ?

Lecture d'un fichier texte local dans le navigateur

Pour lire un fichier texte local dans le navigateur, les développeurs utilisaient traditionnellement XMLHttpRequest. Une façon de procéder consiste à utiliser une fonction qui prend le chemin du fichier et convertit chaque ligne de texte en un tableau de caractères :

function readTextFile() {
  var rawFile = new XMLHttpRequest();
  rawFile.open("GET", "testing.txt", true);
  rawFile.onreadystatechange = function() {
    if (rawFile.readyState === 4) {
      var allText = rawFile.responseText;
      document.getElementById("textSection").innerHTML = allText;
    }
  }
  rawFile.send();
}

Cependant, cette approche échoue souvent avec des exceptions dans les navigateurs autres que Firefox. Pour résoudre ce problème, les développeurs doivent utiliser l'API Fetch introduite dans JS 2015 :

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

De plus, il est crucial d'éviter d'utiliser file:/// pour des raisons de sécurité. Au lieu de cela, envisagez d'utiliser des serveurs Web légers comme le serveur http.server ou HTTP de Python pour le chargement des données.

Un autre problème survient lorsque vous essayez de lire des fichiers localement à l'aide de XMLHttpRequest. Pour résoudre ce problème, les développeurs doivent vérifier le statut 0 puisqu'aucun statut n'est renvoyé pour le chargement de fichiers locaux :

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);
}

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!