Come leggere un file di testo locale?

371

Sto cercando di scrivere un semplice lettore di file di testo creando una funzione che accetta il percorso del file e converte ogni riga di testo in un array di caratteri, ma non funziona.

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

Cosa non va qui?

Questo non sembra funzionare dopo aver cambiato un po 'il codice da una revisione precedente e ora mi sta dando unXMLHttpRequest un'eccezione 101.

Ho provato questo su Firefox e funziona, ma in Google Chrome non funzionerà e continua a darmi un'eccezione 101. Come posso farlo funzionare non solo su Firefox, ma anche su altri browser (specialmente Chrome )?

javascript  file-io  xmlhttprequest 
— Danny
fonte
Cosa sta succedendo specificamente. Non c'è niente nell'array? O solo le cose "sbagliate" ..?
— PinkElephantsOnParade
Stai testando su un computer locale? Assicurati di provare per un statusdi 0così come 200.
— Jeffrey Sweeney,
1
@JeffreySweeney sì, lo sto testando su un computer locale. Ho archiviato il file di testo nello stesso posto dei javascript e html
— Danny

Risposte:

311

È necessario verificare lo stato 0 (come quando si caricano i file localmente con XMLHttpRequest, non si ottiene uno stato restituito perché non proviene da a 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);
}

E specifica file://nel tuo nome file:

readTextFile("file:///C:/your/path/to/file.txt");
— Majid Laissi
fonte
2
In realtà ci sto lavorando su un Mac, quindi dovrei ancora specificare il file: // ??
— Danny,
11
prova a inserire file:///User/Danny/Desktop/javascriptWork/testing.txtla barra degli indirizzi del tuo browser e vedi se riesci a vedere il file ..
— Majid Laissi
21
non deve essere un percorso assoluto .. questo ha funzionato bene per me: readTextFile ('Properties / version.txt'); Grazie!
— Sonic Soul,
2
Dato che stiamo leggendo da un server web, dovremmo aver impostato asincrono true. Se questa fosse una localricerca semplice, impostare asincronismo su falseè ok, ma onreadystatechangenon è necessario mentre è impostato su false. Ecco la documentazione: w3schools.com/ajax/ajax_xmlhttprequest_send.asp
— rambossa
149
Questo non funzionerà in Chrome (possibilmente altri browser) otterrai "Le richieste di origine incrociata sono supportate solo per gli schemi di protocollo: http, dati, chrome, chrome-extension, https, chrome-extension-resource".
— Rick Burgess,
102

Visita Javascript ! E vai alla sezione readAsText e prova l'esempio. Sarete in grado di sapere come la readAsText funzione del FileReader funziona.

    <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
fonte
14
I link sono belli, ma dovresti "citare sempre la parte più rilevante di un link importante, nel caso in cui il sito di destinazione sia irraggiungibile o rimanga permanentemente offline". Vedi Come posso scrivere una buona risposta .
— 4ae1e1,
16
Questo esempio tratta un file di testo immesso dall'utente, ma penso che la domanda riguardasse un file locale per il server.
— S. Kirby,
@ S.Kirby Come detto dall'OP in risposta a una domanda se è eseguito localmente o su un server remoto: è tutto locale. tutto in una cartella nient'altro. . Inoltre, altre persone (come me) potrebbero avere la domanda su come farlo localmente.
— Simon Forsberg,
102

Dopo l'introduzione di fetch api in javascript, la lettura dei contenuti dei file non potrebbe essere più semplice.

leggere un file di testo

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

leggendo un file json

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

Aggiornamento 30/07/2018 (dichiarazione di non responsabilità):

Questa tecnica funziona bene in Firefox , ma sembra che l' implementazione di Chromefetch non supporti lo file:///schema URL alla data di scrittura di questo aggiornamento (testato in Chrome 68).

Update-2 (dichiarazione di non responsabilità):

Questa tecnica non funziona con Firefox sopra la versione 68 (9 luglio 2019) per lo stesso motivo (di sicurezza) come Chrome: CORS request not HTTP. Vedi https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp .

— Abdelaziz Mokhnache
fonte
4
Brillante! Citando lo standard Fetch: "fornisce una gestione coerente di: schemi URL, reindirizzamenti, semantica tra origini, CSP, operatori del servizio, contenuto misto Referer". Immagino che questo significhi addio a buoni ol'FileReaders e HttpRequests (e non mi mancheranno un po ';)
— Armfoot,
1
Ma come puoi usare il testo e inserirlo in una variabile stringa da usare altrove? (Continuo a diventare 'indefinito', non importa cosa ci faccio.)
— not2qubit
2
@ not2qubit il recupero di un file di testo è un'operazione asincrona. Stai diventando indefinito perché stai usando la variabile prima che il file sia completamente letto. Devi usarlo all'interno del callback promesso o usare qualcosa come gli operatori javascript "async waitit".
— 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à del browser: 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>
Espandi frammento

— Poornachander K
fonte
9
Non sono sicuro che questo risponda a questa domanda di 4 anni. L'OP non sta caricando documenti, stanno provando a leggere il file di testo nella stessa directory da un percorso. E se hai intenzione di rispondere a domande così vecchie, almeno scrivi un breve riassunto del perché pensi che la tua risposta sia ora migliore delle altre o di come la lingua è cambiata rispetto alla domanda per giustificare una nuova risposta.
— Matthew Ciaramitaro,
1
Usando il mio html di input di upload di file esistente - copiando le righe da var reader = new FileReader();attraverso reader.readAsBinaryString(..)- legge il contenuto del mio file di testo. Pulito, elegante, funziona come un fascino. La migliore risposta in questa discussione per me - grazie!
— Gene Bo
18

Jon Perryman,

Sì, js può leggere i file locali (vedi FileReader ()) ma non automaticamente: l'utente deve passare il file o un elenco di file allo script con un html <input type=file>.

Quindi con js è possibile elaborare (esempio di visualizzazione) il file o l'elenco dei file, alcune delle loro proprietà e il contenuto del file o dei file.

Ciò che js non può fare per motivi di sicurezza è accedere automaticamente (senza l'input dell'utente) al filesystem del suo computer.

Per consentire a js di accedere automaticamente a fs locale è necessario creare non un file html con js al suo interno ma un documento hta.

Un file hta può contenere js o vbs al suo interno.

Ma l'eseguibile hta funzionerà solo su sistemi Windows.

Questo è il comportamento standard del browser.

Anche google chrome ha funzionato su fs api, maggiori informazioni qui: http://www.html5rocks.com/en/tutorials/file/filesystem/

— Passero
fonte
questo è il commento che stavo cercando. Tutti inseriscono il codice per l'immissione dell'utente del file come tag di input, ma la domanda è quella di prendere automaticamente il file dal percorso indicato nel codice dall'utente. Grazie!
— Kumar Kartikeya,
13

Provabilmente già lo provi, digita "false" come segue:

 rawFile.open("GET", file, false);
— momen
fonte
12

Prova a creare due funzioni:

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
fonte
Per ciò che funziona il browser (sembra che 6 persone lo abbiano provato :-))
— Xan-Kun Clark-Davis
11

altro esempio - il mio lettore con 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
fonte
2
File restituito output base64
— VP
6

Soluzione moderna:

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

Quando l'utente carica un file di testo tramite tale input, verrà registrato sulla console. Ecco una demo di jsbin funzionante .

Ecco una versione più dettagliata:

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

Attualmente (gennaio 2020) funziona solo su Chrome e Firefox, controlla la compatibilità qui se stai leggendo questo in futuro: https://developer.mozilla.org/en-US/docs/Web/API/Blob/text

Sui browser meno recenti, dovrebbe funzionare:

<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
fonte
6

Utilizzo della funzione Fetch e asincrono

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

logFileText('file.txt')
— barro32
fonte
7
Ottengo "Lo schema URL deve essere" http "o" https "per la richiesta CORS."
— Qwerty,
Grazie, funziona per me!
— oscarAguayo,
5

Questo potrebbe aiutare, 

    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.
fonte
2

Aggiungendo ad alcune delle risposte sopra, questa soluzione modificata ha funzionato per me.

<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
fonte
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

- leggi il testo del file da JavaScript
- Testo del log della console dal file usando JavaScript
- Google Chrome e Mozilla Firefox

nel mio caso ho questa struttura di file:inserisci qui la descrizione dell'immagine

il risultato console.log:
inserisci qui la descrizione dell'immagine

— nadir hamidou
fonte
Di seguito è riportato l'errore: L'accesso a XMLHttpRequest su 'file: /// C: / {myLocalPath} PropertiesFile.txt' dall'origine 'null' è stato bloccato dalla politica CORS: le richieste di origine incrociata sono supportate solo per gli schemi di protocollo: http, dati, chrome, chrome-extension, https.
— 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
fonte
1

Ottieni dati di file locali nel caricamento 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);
}

file di data.js come:

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

queryString dinamica unixTime impedisce la memorizzazione nella cache.

AJ lavora in web http: //.

— Lo Vega
fonte
perché non usi la sintassi letterale del modello ES6 per le stringhe multilinea? (vedi developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… )
— Sapphire_Brick
1

Le chiamate AJAX locali in Chrome non sono supportate a causa della stessa politica di origine.

Il messaggio di errore su Chrome è il seguente: "Le richieste di origine incrociata non sono supportate per gli schemi di protocollo: http, dati, chrome, chrome-extension, https."

Ciò significa che Chrome crea un disco virtuale per ogni dominio per mantenere i file serviti dal dominio utilizzando i protocolli http / https. Qualsiasi accesso ai file al di fuori di questo disco virtuale è limitato in base allo stesso criterio di origine. Le richieste e le risposte AJAX si verificano su http / https, quindi non funzioneranno per i file locali.

Firefox non pone tale limitazione, quindi il tuo codice funzionerà felicemente su Firefox. Tuttavia, esistono soluzioni alternative anche per Chrome: vedi qui .

— Sushant T
fonte
0

Puoi importare la mia biblioteca: 

<script src="https://www.editeyusercontent.com/preview/1c_hhRGD3bhwOtWwfBD8QofW9rD3T1kbe/code.js?pe=yikuansun2015@gmail.com"></script>
Espandi frammento

quindi, la funzione fetchfile(path)restituirà il file caricato 

<script src="https://www.editeyusercontent.com/preview/1c_hhRGD3bhwOtWwfBD8QofW9rD3T1kbe/code.js"></script>
<script>console.log(fetchfile("file.txt"))</script>
Espandi frammento

Nota: su Google Chrome se il codice HTML è locale, verranno visualizzati errori, ma il salvataggio del codice HTML e dei file online quindi l'esecuzione del file HTML online funziona.

0

Per leggere il testo di un file locale tramite JavaScriptChrome, il browser Chrome deve essere eseguito con l'argomento --allow-file-access-from-filesper consentire a JavaScript di accedere al file locale, quindi è possibile leggerlo usando XmlHttpRequestil seguente:

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
fonte
0

Come leggere un file locale?

Usando questo caricherai un file con loadText (), quindi JS attenderà in modo asincrono fino a quando il file non verrà letto e caricato, dopodiché eseguirà la funzione readText () che ti consentirà di continuare con la tua normale logica JS (puoi anche scrivere un tentativo di cattura blocco sulla funzione loadText () nel caso si verifichi un errore) ma per questo esempio lo tengo al minimo.

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
fonte
Sembra che tu abbia un caso di funzione-itis
— Sapphire_Brick,
0

Lo so, sono in ritardo a questa festa. Lascia che ti mostri quello che ho.

Questa è una semplice lettura del file di testo

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

Spero che questo possa essere d'aiuto.

— Aljohn Yamaro
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.