Pourquoi mon code JavaScript ne peut-il pas lire les fichiers texte locaux et comment puis-je y remédier ?

Dépannage de la lecture de fichiers texte locaux dans le navigateur

Dans le but de créer un lecteur de fichiers texte de base, une fonction JavaScript a été développée pour prendre dans un chemin de fichier, analysez chaque ligne dans un tableau de caractères, mais rencontrez des erreurs. Cet article vise à diagnostiquer et à résoudre ces problèmes.

Diagnostic d'erreur

Initialement, le code n'a pas réussi à afficher le contenu du texte, malgré la récupération réussie du chemin du fichier. Lors du débogage, il a été découvert que l'objet XMLHttpRequest ne gérait pas correctement l'accès aux fichiers locaux.

Le passage à Firefox a donné de bons résultats, mettant en évidence un problème potentiel spécifique au navigateur. Chrome, en particulier, lançait une exception XMLHttpRequest 101, indiquant une erreur réseau.

Solution pour la compatibilité du navigateur

Pour résoudre le problème de compatibilité du navigateur, l'API Fetch, introduit dans JS en 2015, offre une approche plus simple et plus robuste pour récupérer des données à partir d'URL. Voici une version mise à jour du code :

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

Accès aux fichiers locaux

Les navigateurs modernes restreignent sévèrement l'accès direct au système de fichiers, donc l'utilisation de file:/// doit être évitée . Au lieu de cela, des serveurs Web légers tels que python -m http.server ou npx http-server peuvent être utilisés pour charger des données via des URL HTTP standard.

Statut de gestion 0

Quand En accédant aux fichiers locaux à l'aide de XMLHttpRequest, aucun statut n'est renvoyé. Pour résoudre ce problème, une vérification du statut 0 est nécessaire :

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) {
        // process the text content
      }
    }
  };
  rawFile.send(null);
}

Exemple d'utilisation

Pour utiliser le code mis à jour, spécifiez le chemin du fichier à l'aide de file:// /:

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!