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é
72852 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

22voto

joe Points 573

Solution moderne :

Utilisez fileOrBlob.text() comme suit :

<input type="file" onchange="this.files[0].text().then(t => console.log(t))">

Lorsque l'utilisateur télécharge un fichier texte via cette entrée, il sera enregistré dans la console. Voici une démo de jsbin qui fonctionne. .

Voici une version plus verbeuse :

<input type="file" onchange="loadFile(this.files[0])">
<script>
  async function loadFile(file) {
    let text = await file.text();
    console.log(text);
  }
</script>

Actuellement (janvier 2020), cela ne fonctionne que dans Chrome et Firefox, vérifiez ici la compatibilité si vous lisez ceci à l'avenir : https://developer.mozilla.org/en-US/docs/Web/API/Blob/text

Sur les anciens navigateurs, cela devrait fonctionner :

<input type="file" onchange="loadFile(this.files[0])">
<script>
  async function loadFile(file) {
    let text = await (new Response(file)).text();
    console.log(text);
  }
</script>

Relié : À partir de septembre 2020, la nouvelle API de système de fichiers natif disponible dans Chrome et Edge si vous souhaitez un accès permanent en lecture (et même en écriture) au fichier sélectionné par l'utilisateur.

Répondu el 18 de Janvier, 2020 par joe (573 Points )

0 votes

Quel est le chemin de la racine ?

Commenté el 31 de Décembre, 2020 par mathtick

0 votes

Et que voulez-vous dire par "fichiers" ...

Commenté el 31 de Décembre, 2020 par mathtick

1 votes

Vous devez créer le Blob dans l'exemple, sinon cela n'est pas utile pour les gens, je pense.

Commenté el 31 de Décembre, 2020 par mathtick

Answer 3

13voto

Motsim Mansoor Points 11

Essayez de créer deux fonctions :

function getData(){       //this will read file and send information to other function
       var xmlhttp;

       if (window.XMLHttpRequest) {
           xmlhttp = new XMLHttpRequest();               
       }           
       else {               
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");               
       }

       xmlhttp.onreadystatechange = function () {               
           if (xmlhttp.readyState == 4) {                   
             var lines = xmlhttp.responseText;    //*here we get all lines from text file*

             intoArray(lines);     *//here we call function with parameter "lines*"                   
           }               
       }

       xmlhttp.open("GET", "motsim1.txt", true);
       xmlhttp.send();    
}

function intoArray (lines) {
   // splitting all text data into array "\n" is splitting data from each new line
   //and saving each new line as each element*

   var lineArr = lines.split('\n'); 

   //just to check if it works output lineArr[index] as below
   document.write(lineArr[2]);         
   document.write(lineArr[3]);
}

Répondu el 16 de Octobre, 2013 par Motsim Mansoor (11 Points )

0 votes

Pour quels navigateurs cela fonctionne-t-il (il semble que 6 personnes l'aient essayé :-) )

Commenté el 8 de Juillet, 2016 par Xan-Kun Clark-Davis

Answer 4

12voto

momen Points 21

Si vous l'avez déjà essayé, tapez "false" comme suit :

 rawFile.open("GET", file, false);

Répondu el 26 de Novembre, 2013 par momen (21 Points )

Answer 5

12voto

websky Points 2564

Autre exemple - mon lecteur avec la classe FileReader

<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
    </head>
    <body>
        <script>
            function PreviewText() {
            var oFReader = new FileReader();
            oFReader.readAsDataURL(document.getElementById("uploadText").files[0]);
            oFReader.onload = function (oFREvent) {
                document.getElementById("uploadTextValue").value = oFREvent.target.result; 
                document.getElementById("obj").data = oFREvent.target.result;
            };
        };
        jQuery(document).ready(function(){
            $('#viewSource').click(function ()
            {
                var text = $('#uploadTextValue').val();
                alert(text);
                //here ajax
            });
        });
        </script>
        <object width="100%" height="400" data="" id="obj"></object>
        <div>
            <input type="hidden" id="uploadTextValue" name="uploadTextValue" value="" />
            <input id="uploadText" style="width:120px" type="file" size="10"  onchange="PreviewText();" />
        </div>
        <a href="#" id="viewSource">Source file</a>
    </body>
</html>

Répondu el 19 de Février, 2015 par websky (2564 Points )

2 votes

Retour du fichier en base64

Commenté el 6 de Novembre, 2015 par V.P.

Answer 6

10voto

barro32 Points 595

Utilisation de Aller chercher et la fonction asynchrone

const logFileText = async file => {
    const response = await fetch(file)
    const text = await response.text()
    console.log(text)
}

logFileText('file.txt')

Répondu el 8 de Janvier, 2019 par barro32 (595 Points )

14 votes

J'obtiens "Le schéma d'URL doit être "http" ou "https" pour une requête CORS".

Commenté el 28 de Juin, 2019 par Qwerty

0 votes

Une solution parfaite. C'était simple comme "logFileText('./test.txt')"

Commenté el 26 de Janvier, 2021 par Amit

Comment lire un fichier texte local ?

Réponses

Solution moderne :

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment lire un fichier texte local ?

Réponses

Solution moderne :

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: