Comment lire un fichier texte local ?

Question

Comment lire un fichier texte local ?

Demandé el 21 de Janvier, 2013: Quand la question a-t-elle été
72851 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'essaie d'écrire un simple lecteur de fichier texte en créant une fonction qui prend le chemin du fichier et convertit chaque ligne de texte en un tableau de caractères, mais cela ne fonctionne pas.

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

Qu'est-ce qui ne va pas ici ?

Cela ne semble toujours pas fonctionner après avoir modifié un peu le code d'un précédente révision et maintenant il me donne un XMLHttpRequest exception 101.

Je l'ai testé sur Firefox et cela fonctionne, mais dans Google Chrome, cela ne fonctionne pas et je reçois toujours l'exception 101. Comment puis-je faire en sorte que cela fonctionne non seulement sur Firefox, mais aussi sur d'autres navigateurs (en particulier Chrome) ?

Demandé el 21 de Janvier, 2013 par Danny

0 votes

Ce qui se passe spécifiquement. N'y a-t-il rien dans le tableau ? Ou juste les "mauvaises" choses ?

Commenté el 21 de Janvier, 2013 par PinkElephantsOnParade

0 votes

Faites-vous des tests sur une machine locale ? Assurez-vous de tester pour un status de 0 ainsi que 200 .

Commenté el 21 de Janvier, 2013 par Jeffrey Sweeney

1 votes

@JeffreySweeney oui, je teste ceci sur une machine locale. J'ai stocké le fichier texte au même endroit que les javascripts et le html.

Commenté el 21 de Janvier, 2013 par Danny

Answer 1

5 Réponses

Answer 2

366voto

Majid L Points 5467

Vous devez vérifier l'état 0 (comme lors du chargement local de fichiers avec XMLHttpRequest vous n'obtiendrez pas de retour d'état, car il ne s'agit pas d'une demande d'accès à l'Internet. Webserver )

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;
                alert(allText);
            }
        }
    }
    rawFile.send(null);
}

Et précisez file:// dans votre nom de fichier :

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

Répondu el 21 de Janvier, 2013 par Majid L (5467 Points )

4 votes

En fait, je travaille sur ce projet sur un Mac, donc est-ce que je dois toujours spécifier le fichier:// ?

Commenté el 21 de Janvier, 2013 par Danny

0 votes

Quelque chose comme "file:///tmp/my_file"

Commenté el 21 de Janvier, 2013 par Majid L

0 votes

Cela ne semble pas fonctionner. J'ai tapé "file:///User/Danny/Desktop/javascriptWork/testing.txt" mais cela fait apparaître une alerte sans rien.

Commenté el 21 de Janvier, 2013 par Danny

Afficher 25 autres commentaires

Answer 3

150voto

Abdelaziz Mokhnache Points 1908

Après l'introduction de récupérer l'api en javascript, la lecture du contenu des fichiers ne pourrait être plus simple.

lecture d'un fichier texte

fetch('file.txt')
  .then(response => response.text())
  .then(text => console.log(text))
  // outputs the content of the text file

lecture d'un fichier json

fetch('file.json')
  .then(response => response.json())
  .then(jsonResponse => console.log(jsonResponse))     
   // outputs a javascript object from the parsed json

Mise à jour 30/07/2018 (avertissement) :

Cette technique fonctionne bien dans Firefox mais il semble que Chrome 's fetch ne prend pas en charge file:/// Schéma d'URL à la date de rédaction de cette mise à jour (testé dans Chrome 68).

Update-2 (disclaimer) :

Cette technique ne fonctionne pas avec Firefox au-dessus de la version 68 (9 juillet 2019) pour la même raison (sécurité) que Chrome : CORS request not HTTP . Voir https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp .

Répondu el 9 de Septembre, 2017 par Abdelaziz Mokhnache (1908 Points )

4 votes

Brillant ! Je cite la norme Fetch : "fournit une gestion cohérente de : schémas URL, redirections, sémantique d'origine croisée, CSP, travailleurs de service, contenu mixte, Referer ". Je suppose que cela signifie adieu aux bons vieux FileReaders et HttpRequests (et ils ne me manqueront pas du tout ;)

Commenté el 25 de Octobre, 2017 par Armfoot

1 votes

Mais comment utiliser le texte et le mettre dans une variable de type chaîne pour l'utiliser ailleurs ? (Je continue à obtenir 'undefined' quoi que je fasse).

Commenté el 8 de Février, 2018 par user1147688

2 votes

@not2qubit La récupération d'un fichier texte est une opération asynchrone. Vous obtenez undefined parce que vous utilisez la variable avant que le fichier soit complètement lu. Vous devez l'utiliser dans le callback de la promesse ou utiliser quelque chose comme les opérateurs "async await" de javascript.

Commenté el 8 de Février, 2018 par Abdelaziz Mokhnache

Afficher 10 autres commentaires

Answer 4

120voto

xxammuxx Points 1

Visitez Javascripture ! Et allez à la section readAsText et essayez l'exemple. Vous serez en mesure de savoir comment le readAsText fonction de Lecteur de fichiers travaux.

    <html>
    <head>
    <script>
      var openFile = function(event) {
        var input = event.target;

        var reader = new FileReader();
        reader.onload = function(){
          var text = reader.result;
          var node = document.getElementById('output');
          node.innerText = text;
          console.log(reader.result.substring(0, 200));
        };
        reader.readAsText(input.files[0]);
      };
    </script>
    </head>
    <body>
    <input type='file' accept='text/plain' onchange='openFile(event)'><br>
    <div id='output'>
    ...
    </div>
    </body>
    </html>

Répondu el 20 de Mars, 2015 par xxammuxx (1 Points )

17 votes

Les liens, c'est bien, mais vous devez "toujours citer la partie la plus pertinente d'un lien important, au cas où le site cible serait inaccessible ou mis hors ligne de façon permanente". Voir Comment rédiger une bonne réponse .

Commenté el 20 de Mars, 2015 par zmwangx

20 votes

Cet exemple traite d'un fichier texte saisi par l'utilisateur, mais je pense que la question portait sur un fichier local au serveur.

Commenté el 5 de Septembre, 2015 par S. Kirby

2 votes

@S.Kirby Comme indiqué par le PO en réponse à une question sur le fait qu'il soit exécuté localement ou sur un serveur distant : tout est local. tout est dans un seul dossier, rien d'autre. . En outre, d'autres personnes (comme moi) pourraient se demander comment le faire localement.

Commenté el 26 de Novembre, 2019 par Simon André Forsberg

Answer 5

54voto

Poornachander K Points 549

var input = document.getElementById("myFile");
var output = document.getElementById("output");

input.addEventListener("change", function () {
  if (this.files && this.files[0]) {
    var myFile = this.files[0];
    var reader = new FileReader();

    reader.addEventListener('load', function (e) {
      output.textContent = e.target.result;
    });

    reader.readAsBinaryString(myFile);
  }   
});

<input type="file" id="myFile">
<hr>
<textarea style="width:500px;height: 400px" id="output"></textarea>

Répondu el 22 de Août, 2017 par Poornachander K (549 Points )

13 votes

Je ne suis pas sûr que cela réponde à cette question vieille de 4 ans. L'OP ne télécharge pas de documents, il essaie de lire le fichier texte dans le même répertoire à partir d'un chemin. Et si vous répondez à des questions aussi anciennes, écrivez au moins un court résumé expliquant pourquoi vous pensez que votre réponse est meilleure que les autres ou comment le langage a changé depuis la question pour justifier une nouvelle réponse.

Commenté el 22 de Août, 2017 par Matthew Ciaramitaro

4 votes

En utilisant mon propre fichier html d'entrée de téléchargement existant - en copiant les lignes de var reader = new FileReader(); par le biais de reader.readAsBinaryString(..) - il lit le contenu de mon fichier texte. C'est propre, élégant et ça marche comme sur des roulettes. La meilleure réponse de ce fil de discussion pour moi - merci !

Commenté el 8 de Mai, 2018 par gnB

Answer 6

31voto

Sparrow Points 271

Jon Perryman,

Oui, JS peut lire les fichiers locaux (voir FileReader()) mais pas automatiquement : l'utilisateur doit passer le fichier ou une liste de fichiers au script avec un html <input type="file"> .

Ensuite, avec JS, il est possible de traiter (exemple : visualiser) le fichier ou la liste de fichiers, certaines de leurs propriétés et le contenu du ou des fichiers.

Ce que JS ne peut pas faire pour des raisons de sécurité, c'est accéder automatiquement (sans intervention de l'utilisateur) au système de fichiers de son ordinateur.

Pour permettre à JS d'accéder automatiquement au fs local, il faut créer non pas un fichier html avec JS à l'intérieur, mais un document hta.

Un fichier hta peut contenir des JS ou des VBS.

Mais l'exécutable hta ne fonctionne que sur les systèmes Windows.

C'est le comportement standard des navigateurs.

Google Chrome a également travaillé sur l'API fs, plus d'informations ici : http://www.html5rocks.com/en/tutorials/file/filesystem/

Répondu el 29 de Janvier, 2016 par Sparrow (271 Points )

2 votes

C'est le commentaire que je cherchais. Tout le monde met du code pour l'entrée du fichier par l'utilisateur comme balise d'entrée, mais la question est de prendre le fichier automatiquement à partir du chemin mentionné dans le code par l'utilisateur. Merci !

Commenté el 27 de Janvier, 2020 par Kumar Kartikeya

Comment lire un fichier texte local ?

Réponses

Mise à jour 30/07/2018 (avertissement) :

Update-2 (disclaimer) :

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment lire un fichier texte local ?

Réponses

Mise à jour 30/07/2018 (avertissement) :

Update-2 (disclaimer) :

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: