Comment lire un fichier texte local?

371

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 changé un peu le code d'une révision précédente et maintenant cela me donne une XMLHttpRequestexception 101.

J'ai testé cela sur Firefox et cela fonctionne, mais dans Google Chrome, cela ne fonctionne tout simplement pas et il me donne toujours une exception 101. Comment puis-je faire fonctionner cela non seulement sur Firefox, mais aussi sur d'autres navigateurs (en particulier Chrome )?

javascript file-io xmlhttprequest Danny
la source
Qu'est-ce qui se passe spécifiquement. N'y a-t-il rien dans le tableau? Ou tout simplement le "mauvais" truc ..?
PinkElephantsOnParade
Testez-vous sur une machine locale? Assurez - vous de tester pour statusde 0même que 200.
Jeffrey Sweeney
1
@JeffreySweeney oui, je teste cela sur une machine locale. J'ai stocké le fichier texte au même endroit que les javascripts et html
Danny

Réponses:

311

Vous devez vérifier l'état 0 (comme lorsque vous chargez des fichiers localement avec XMLHttpRequest, vous ne recevez pas d'état renvoyé car il ne provient pas d'un 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 spécifiez file://dans votre nom de fichier:

readTextFile("file:///C:/your/path/to/file.txt");
Majid Laissi
la source
2
Je suis en train de travailler sur cela sur un mac, donc devrais-je toujours spécifier le fichier: // ??
Danny
11
essayez de mettre file:///User/Danny/Desktop/javascriptWork/testing.txtdans la barre d'url de votre navigateur et voyez si vous pouvez voir le fichier ..
Majid Laissi
21
il n'a pas besoin d'être un chemin absolu .. cela a très bien fonctionné pour moi: readTextFile ('Properties / version.txt'); Merci!
Sonic Soul
2
Puisque nous lisons depuis un serveur Web, nous devrions avoir async défini sur true. S'il s'agissait d'une localrecherche simple, la définition de async sur falseest ok, mais onreadystatechangen'est pas nécessaire tant qu'elle est définie sur false. Voici la documentation: w3schools.com/ajax/ajax_xmlhttprequest_send.asp
rambossa
149
Cela ne fonctionnera pas dans Chrome (possiblité d'autres navigateurs), vous obtiendrez "Les demandes d'origine croisée ne sont prises en charge que pour les schémas de protocole: http, données, chrome, chrome-extension, https, chrome-extension-resource."
Rick Burgess
102

Visitez Javascripture ! Et allez dans la section readAsText et essayez l'exemple. Vous serez en mesure de savoir comment la readAsText fonction de FileReader fonctionne.

    <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>
Amit Chaurasia
la source
14
Les liens sont agréables, mais vous devez "toujours citer la partie la plus pertinente d'un lien important, au cas où le site cible serait inaccessible ou se déconnecterait définitivement." Voir Comment écrire une bonne réponse .
4ae1e1
16
Cet exemple concerne un fichier texte saisi par l'utilisateur, mais je pense que la question concernait un fichier local sur le serveur.
S. Kirby
@ S.Kirby Comme l'a dit l'OP en réponse à une question sur son exécution locale ou sur un serveur distant: tout est local. tout dans un dossier rien d'autre. . En outre, d'autres personnes (comme moi) pourraient avoir la question de savoir comment le faire localement.
Simon Forsberg
102

Après l'introduction de fetch api en javascript, la lecture du contenu du fichier ne pouvait pas ê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 l' implémentation de Chromefetch ne prenne pas en charge le file:///schéma d'URL à la date de rédaction de cette mise à jour (testé dans Chrome 68).

Update-2 (avertissement):

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

Abdelaziz Mokhnache
la source
4
Brillant! Citant la norme de récupération: «offre une gestion cohérente des schémas d'URL, des redirections, de la sémantique d'origine croisée, du CSP, des employés de service, du contenu mixte Referer». Je suppose que cela signifie au revoir aux bons ol'FileReaders et HttpRequests (et je ne les manquerai pas un peu;)
Armfoot
1
Mais comment pouvez-vous utiliser le texte et le mettre dans une variable de chaîne pour une utilisation ailleurs? (Je continue à être «indéfini», peu importe ce que je fais.)
not2qubit
2
@ not2qubit récupérer un fichier texte est une opération asynchrone. Vous obtenez indéfini parce que vous utilisez la variable avant la lecture complète du fichier. Vous devez l'utiliser dans le rappel de promesse ou utiliser quelque chose comme les opérateurs javascript "async wait".
Abdelaziz Mokhnache
13
Fetch API cannot load file:///C:/Users/path/to/file/file.txt. URL scheme must be "http" or "https" for CORS request.
Jacob Schneider
1
compatibilité du navigateur: developer.mozilla.org/en-US/docs/Web/API/…
Sam Murphy
39 

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>
Développer l'extrait

Poornachander K
la source
9
Je ne suis pas sûr que cela réponde à cette question 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 allez répondre à des questions de cet ancien, écrivez au moins un bref résumé des raisons pour lesquelles vous pensez que votre réponse est maintenant meilleure que les autres ou comment la langue a changé depuis la question pour justifier une nouvelle réponse.
Matthew Ciaramitaro
1
En utilisant mon propre fichier html d'entrée de téléchargement existant - en copiant les lignes de part en var reader = new FileReader();part reader.readAsBinaryString(..)- il lit le contenu de mon fichier texte. Propre, élégant, fonctionne comme un charme. Meilleure réponse dans ce fil pour moi - merci!
Gene Bo
18

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 de vue) le fichier ou la liste des 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 d'accéder automatiquement (sans la saisie 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 contenant js mais un document hta.

Un fichier hta peut contenir js ou vbs à l'intérieur.

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

Il s'agit d'un comportement de navigateur standard.

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

Moineau
la source
c'est le commentaire que je cherchais. Tout le monde met le code pour l'entrée utilisateur du fichier 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!
Kumar Kartikeya
13

Vous pouvez déjà l'essayer, tapez "false" comme suit:

 rawFile.open("GET", file, false);
momen
la source
12

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]);
}
Motsim Mansoor
la source
Pour quels navigateurs fait ce travail (il semble que 6 personnes l'ont essayé :-))
Xan-Kun Clark-Davis
11

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>
websky
la source
2
Retour de fichier en sortie base64
VP
6

Solution moderne:

<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é sur la console. Voici une démo jsbin qui fonctionne .

Voici une version plus détaillée:

<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>
Joe
la source
6

Utilisation de la fonction Fetch et async

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

logFileText('file.txt')
barro32
la source
7
J'obtiens "Le schéma d'URL doit être" http "ou" https "pour la demande CORS."
Qwerty
Merci, ça marche pour moi!
oscarAguayo
5

Cela pourrait aider, 

    var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            alert(xmlhttp.responseText);
        }
    }

    xmlhttp.open("GET", "sample.txt", true);
    xmlhttp.send();
Sameera R.
la source
2

En ajoutant à certaines des réponses ci-dessus, cette solution modifiée a fonctionné pour moi.

<input id="file-upload-input" type="file" class="form-control" accept="*" />

....

let fileInput  = document.getElementById('file-upload-input');
let files = fileInput.files;

//Use createObjectURL, this should address any CORS issues.
let filePath = URL.createObjectURL(files[0]);

....

function readTextFile(filePath){
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", filePath , true);
    rawFile.send(null);

    rawFile.onreadystatechange = function (){
        if(rawFile.readyState === 4){
            if(rawFile.status === 200 || rawFile.status == 0){
                var allText = rawFile.responseText;
                console.log(allText);
            }
        }
    }     
}
Fabii
la source
2 
function readTextFile(file) {
    var rawFile = new XMLHttpRequest(); // XMLHttpRequest (often abbreviated as XHR) is a browser object accessible in JavaScript that provides data in XML, JSON, but also HTML format, or even a simple text using HTTP requests.
    rawFile.open("GET", file, false); // open with method GET the file with the link file ,  false (synchronous)
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4) // readyState = 4: request finished and response is ready
        {
            if(rawFile.status === 200) // status 200: "OK"
            {
                var allText = rawFile.responseText; //  Returns the response data as a string
                console.log(allText); // display text on the console
            }
        }
    }
    rawFile.send(null); //Sends the request to the server Used for GET requests with param null
}

readTextFile("text.txt"); //<= Call function ===== don't need "file:///..." just the path

- lire le texte du fichier à partir de javascript
- le texte du journal de la console à partir du fichier à l'aide de javascript
- Google Chrome et Mozilla Firefox

dans mon cas, j'ai cette structure de fichiers:entrez la description de l'image ici

le résultat console.log:
entrez la description de l'image ici

nadir hamidou
la source
L'erreur ci-dessous est affichée
Kumar Kartikeya
1 
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {            
                $.ajax({`enter code here`
                    url: "TextFile.txt",
                    dataType: "text",
                    success: function (data) {                 
                            var text = $('#newCheckText').val();
                            var str = data;
                            var str_array = str.split('\n');
                            for (var i = 0; i < str_array.length; i++) {
                                // Trim the excess whitespace.
                                str_array[i] = str_array[i].replace(/^\s*/, "").replace(/\s*$/, "");
                                // Add additional code here, such as:
                                alert(str_array[i]);
                                $('#checkboxes').append('<input type="checkbox"  class="checkBoxClass" /> ' + str_array[i] + '<br />');
                            }
                    }                   
                });
                $("#ckbCheckAll").click(function () {
                    $(".checkBoxClass").prop('checked', $(this).prop('checked'));
                });
        });
    </script>
</head>
<body>
    <div id="checkboxes">
        <input type="checkbox" id="ckbCheckAll" class="checkBoxClass"/> Select All<br />        
    </div>
</body>
</html>
adithya
la source
1

Obtenez les données du fichier local dans la charge js (data.js):

function loadMyFile(){
    console.log("ut:"+unixTimeSec());
    loadScript("data.js?"+unixTimeSec(), loadParse);
}
function loadParse(){
    var mA_=mSdata.split("\n");
    console.log(mA_.length);
}
function loadScript(url, callback){

    var script = document.createElement("script")
    script.type = "text/javascript";

    if (script.readyState){  //IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" ||
                    script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    } else {  //Others
        script.onload = function(){
            callback();
        };
    }

    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}
function hereDoc(f) {
  return f.toString().
      replace(/^[^\/]+\/\*![^\r\n]*[\r\n]*/, "").
      replace(/[\r\n][^\r\n]*\*\/[^\/]+$/, "");
}
function unixTimeSec(){
    return Math.round( (new Date()).getTime()/1000);
}

fichier de data.js comme:

var mSdata = hereDoc(function() {/*!
17,399
1237,399
BLAHBLAH
BLAHBLAH
155,82
194,376
*/});

dynamic unixTime queryString empêche la mise en cache.

AJ travaille sur le Web http: //.

Lo Vega
la source
pourquoi n'utilisez-vous pas la syntaxe littérale du modèle ES6 pour les chaînes multilignes? (voir developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… )
Sapphire_Brick
1

Les appels AJAX locaux dans Chrome ne sont pas pris en charge en raison de la même politique d'origine.

Le message d'erreur sur Chrome est le suivant: "Les demandes d'origine croisée ne sont pas prises en charge pour les schémas de protocole: http, data, chrome, chrome-extension, https."

Cela signifie que Chrome crée un disque virtuel pour chaque domaine pour conserver les fichiers servis par le domaine à l'aide des protocoles http / https. Tout accès aux fichiers en dehors de ce disque virtuel est limité selon la même politique d'origine. Les requêtes et réponses AJAX se produisent sur http / https, donc ne fonctionneront pas pour les fichiers locaux.

Firefox ne met pas une telle restriction, donc votre code fonctionnera avec bonheur sur Firefox. Cependant, il existe également des solutions de contournement pour Chrome: voir ici .

Sushant T
la source
0

Vous pouvez importer ma bibliothèque: 

<script src="https://www.editeyusercontent.com/preview/1c_hhRGD3bhwOtWwfBD8QofW9rD3T1kbe/[email protected]"></script>
Développer l'extrait

ensuite, la fonction fetchfile(path)renverra le fichier téléchargé 

<script src="https://www.editeyusercontent.com/preview/1c_hhRGD3bhwOtWwfBD8QofW9rD3T1kbe/code.js"></script>
<script>console.log(fetchfile("file.txt"))</script>
Développer l'extrait

Veuillez noter: sur Google Chrome si le code HTML est local, des erreurs apparaîtront, mais l'enregistrement du code HTML et des fichiers en ligne puis l'exécution du fichier HTML en ligne fonctionnent.


la source
0

Afin de lire un texte de fichier local via JavaScriptChrome, le navigateur Chrome doit s'exécuter avec l'argument --allow-file-access-from-filespour autoriser JavaScript à accéder au fichier local, puis vous pouvez le lire en utilisant XmlHttpRequestcomme suit:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
   if (xmlhttp.readyState == 4) {
       var allText = xmlhttp.responseText;          
            }
        };
xmlhttp.open("GET", file, false);
xmlhttp.send(null);
Ali Ezzat Odeh
la source
0

Comment lire un fichier local?

En l'utilisant, vous chargerez un fichier par loadText () puis JS attendra de manière asynchrone jusqu'à ce que le fichier soit lu et chargé après cela, il exécutera la fonction readText () vous permettant de continuer avec votre logique JS normale (vous pouvez également écrire un try catch bloc sur la fonction loadText () dans le cas où une erreur survient) mais pour cet exemple, je le garde au minimum.

async function loadText(url) {
    text = await fetch(url);
    //awaits for text.text() prop 
    //and then sends it to readText()
    readText(await text.text());
}

function readText(text){
    //here you can continue with your JS normal logic
    console.log(text);
}

loadText('test.txt');
D.Snap
la source
Il semble que vous ayez un cas de fonction-itis
Sapphire_Brick
0

Je sais, je suis en retard à cette fête. Permettez-moi de vous montrer ce que j'ai.

Ceci est une simple lecture du fichier texte

var path = C:\\established-titles\\orders\\shopify-orders.txt
var fs = require('fs')
fs.readFile(path , 'utf8', function(err, data) {
  if (err) throw err;
  console.log('OK: ' + filename);
  console.log(data)
});

J'espère que ça aide.

Aljohn Yamaro
la source