Wie lese ich eine lokale Textdatei?

371

Ich versuche, einen einfachen Textdateireader zu schreiben, indem ich eine Funktion erstelle, die den Pfad der Datei übernimmt und jede Textzeile in ein char-Array konvertiert, aber es funktioniert nicht.

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

Was läuft hier falsch?

Dies scheint immer noch nicht zu funktionieren, nachdem der Code ein wenig von einer früheren Revision geändert wurde, und jetzt gibt es mir eine XMLHttpRequestAusnahme 101.

Ich habe dies unter Firefox getestet und es funktioniert, aber in Google Chrome funktioniert es einfach nicht und es gibt mir immer wieder eine Ausnahme 101. Wie kann ich erreichen, dass dies nicht nur in Firefox, sondern auch in anderen Browsern (insbesondere Chrome) funktioniert? )?

javascript file-io xmlhttprequest

— Danny
quelle

Was genau passiert. Ist nichts im Array? Oder nur das "falsche" Zeug ..?

— PinkElephantsOnParade

Testen Sie auf einem lokalen Computer? Achten Sie darauf , zu Test für einen statusvon 0sowie 200.

— Jeffrey Sweeney

1

@ JeffreySweeney Ja, ich teste dies auf einem lokalen Computer. Ich habe die Textdatei am selben Ort wie die Javascripts und HTML gespeichert

— Danny

311

Sie müssen nach Status 0 suchen (wie beim lokalen Laden von Dateien mit XMLHttpRequestwird kein Status zurückgegeben, da dieser nicht von a stammt 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);
}

Und geben Sie file://in Ihrem Dateinamen an:

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

— Majid Laissi
quelle

2

Ich arbeite tatsächlich auf einem Mac daran. Würde ich also immer noch die Datei angeben: // ??

— Danny

11

Versuchen Sie, file:///User/Danny/Desktop/javascriptWork/testing.txtin die URL-Leiste Ihres Browsers zu setzen und zu sehen, ob Sie die Datei sehen können.

— Majid Laissi

21

Es muss kein absoluter Pfad sein. Das hat bei mir ganz gut funktioniert: readTextFile ('Properties / version.txt'); Vielen Dank!

— Sonic Soul

2

Da wir von einem Webserver lesen, sollten wir asynchron eingestellt sein true. Wenn dies eine einfache localSuche wäre, wäre das Setzen von async auf falseok, wird jedoch onreadystatechangenicht benötigt, solange es auf false gesetzt ist. Hier ist die Dokumentation: w3schools.com/ajax/ajax_xmlhttprequest_send.asp

— Rambossa

149

Dies funktioniert in Chrome nicht (möglicherweise in anderen Browsern). Sie erhalten die Meldung "Ursprungsübergreifende Anforderungen werden nur für Protokollschemata unterstützt: http, data, chrome, chrome-extension, https, chrome-extension-resource."

— Rick Burgess

102

Besuchen Sie Javascripture ! Gehen Sie zum Abschnitt readAsText und probieren Sie das Beispiel aus. Sie können wissen, wie die readAsText- Funktion von FileReader funktioniert.

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

14

Links sind nett, aber Sie sollten "immer den relevantesten Teil eines wichtigen Links zitieren, falls die Zielwebsite nicht erreichbar ist oder dauerhaft offline geht". Siehe Wie kann ich eine gute Antwort schreiben .

— 4ae1e1

16

Dieses Beispiel befasst sich mit einer Benutzereingabetextdatei, aber ich denke, die Frage betraf eine Datei, die lokal auf dem Server ist.

— S. Kirby

@ S.Kirby Wie vom OP als Antwort auf die Frage gesagt, ob es lokal oder auf einem Remote-Server ausgeführt wird: Es ist alles lokal. alles in einem Ordner sonst nichts. . Außerdem könnten andere Leute (wie ich) die Frage haben, wie es vor Ort geht.

— Simon Forsberg

102

Nach der Einführung von fetch api in Javascript könnte das Lesen von Dateiinhalten nicht einfacher sein.

Lesen einer Textdatei

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

Lesen einer JSON-Datei

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

Update 30/07/2018 (Haftungsausschluss):

Diese Technik funktioniert in Firefox einwandfrei , aber es scheint , dass die Implementierung von Chrome zum Zeitpunkt des Schreibens dieses Updates (getestet in Chrome 68) fetchkein file:///URL-Schema unterstützt .

Update-2 (Haftungsausschluss):

Diese Technik funktioniert mit Firefox über Version 68 (9. Juli 2019) aus demselben (Sicherheits-) Grund wie Chrome nicht : CORS request not HTTP. Siehe https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp .

— Abdelaziz Mokhnache
quelle

4

Brillant! Zitieren des Abrufstandards: "Bietet konsistente Behandlung von: URL-Schemata, Weiterleitungen, Cross-Origin-Semantik, CSP, Servicemitarbeitern, gemischten Inhalten Referer". Ich denke, das bedeutet Abschied von guten alten Dateireadern und HttpRequests (und ich werde sie nicht ein bisschen vermissen;)

— Armfoot

1

Aber wie können Sie den Text verwenden und in eine Zeichenfolgenvariable einfügen, um ihn an anderer Stelle zu verwenden? (Ich werde immer 'undefiniert', egal was ich damit mache.)

— not2qubit

2

@ not2qubit Das Abrufen einer Textdatei ist eine asynchrone Operation. Sie werden undefiniert, weil Sie die Variable verwenden, bevor die Datei vollständig gelesen wird. Sie müssen es innerhalb des Versprechens-Rückrufs verwenden oder so etwas wie Javascript-Operatoren "async await" verwenden.

— 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

Browserkompatibilität: 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>

Erweitern Sie das Snippet

— Poornachander K.
quelle

9

Ich bin mir nicht sicher, ob dies diese 4 Jahre alte Frage beantwortet. Das OP lädt keine Dokumente hoch, sondern versucht, die Textdatei im selben Verzeichnis aus einem Pfad zu lesen. Und wenn Sie Fragen beantworten, die so alt sind, schreiben Sie zumindest eine kurze Zusammenfassung darüber, warum Ihre Antwort Ihrer Meinung nach jetzt besser ist als die der anderen oder wie sich die Sprache seit der Frage geändert hat, um eine neue Antwort zu rechtfertigen.

— Matthew Ciaramitaro

1

Unter Verwendung meiner eigenen vorhandenen Datei-Upload-Eingabe-HTML - Kopieren der Zeilen von var reader = new FileReader();durch reader.readAsBinaryString(..)- liest es den Inhalt meiner Textdatei. Sauber, elegant, wirkt wie ein Zauber. Beste Antwort in diesem Thread für mich - danke!

— Gene Bo

18

Jon Perryman,

Ja, js kann lokale Dateien lesen (siehe FileReader ()), aber nicht automatisch: Der Benutzer muss die Datei oder eine Liste von Dateien mit einem HTML-Code an das Skript übergeben <input type=file>.

Mit js ist es dann möglich, die Datei oder die Liste der Dateien, einige ihrer Eigenschaften und die Datei oder den Dateiinhalt zu verarbeiten (Beispielansicht).

Was js aus Sicherheitsgründen nicht tun kann, ist der automatische Zugriff (ohne Benutzereingabe) auf das Dateisystem seines Computers.

Damit js automatisch auf die lokalen fs zugreifen kann, muss keine HTML-Datei mit js darin erstellt werden, sondern ein hta-Dokument.

Eine hta-Datei kann js oder vbs enthalten.

Die ausführbare Datei hta funktioniert jedoch nur auf Windows-Systemen.

Dies ist das Standardverhalten des Browsers.

Auch Google Chrome funktionierte bei der fs api, weitere Infos hier: http://www.html5rocks.com/en/tutorials/file/filesystem/

— Spatz
quelle

Dies ist der Kommentar, nach dem ich gesucht habe. Jeder, der Code für die Benutzereingabe der Datei als Eingabe-Tag einfügt, aber die Frage ist, ob die Datei automatisch von dem im Code angegebenen Pfad vom Benutzer übernommen wird. Vielen Dank!

— Kumar Kartikeya

13

Wenn Sie es bereits versuchen, geben Sie "false" wie folgt ein:

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

— Momen
quelle

12

Versuchen Sie, zwei Funktionen zu erstellen:

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
quelle

Für welche Browser funktioniert das (anscheinend haben 6 Leute es versucht :-))

— Xan-Kun Clark-Davis

11

anderes Beispiel - mein Leser mit FileReader-Klasse

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

2

Datei return base64 Ausgabe

— VP

6

Verwenden der Abruf- und Async-Funktion

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

logFileText('file.txt')

— barro32
quelle

7

Ich erhalte das URL-Schema für die CORS-Anfrage "http" oder "https". "

— Qwerty

Danke, funktioniert für mich!

— oscarAguayo

5

Dies könnte helfen,

    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.
quelle

5

Moderne Lösung:

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

Wenn der Benutzer eine Textdatei über diese Eingabe hochlädt, wird diese an der Konsole protokolliert. Hier ist eine funktionierende jsbin-Demo .

Hier ist eine ausführlichere Version:

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

Derzeit (Januar 2020) funktioniert dies nur in Chrome und Firefox. Überprüfen Sie hier die Kompatibilität, wenn Sie dies in Zukunft lesen: https://developer.mozilla.org/en-US/docs/Web/API/Blob/text

In älteren Browsern sollte dies funktionieren:

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

2

Zusätzlich zu einigen der oben genannten Antworten hat diese modifizierte Lösung für mich funktioniert.

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

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

- Lesen Sie den Dateitext aus Javascript
- Konsolenprotokolltext aus der Datei mit Javascript
- Google Chrome und Mozilla Firefox

In meinem Fall habe ich diese Dateistruktur :

das Ergebnis von console.log:

— Nadir Hamidou
quelle

Im Folgenden wird der folgende Fehler angezeigt

— 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
quelle

1

Holen Sie sich lokale Dateidaten in js (data.js) load:

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

Datei von data.js wie:

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

dynamischer unixTime queryString verhindert das Zwischenspeichern.

AJ arbeitet im Web http: //.

— Lo Vega
quelle

Warum verwenden Sie nicht die ES6-Vorlagenliteral-Syntax für mehrzeilige Zeichenfolgen? (Siehe developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… )

— Sapphire_Brick

1

Lokale AJAX-Aufrufe in Chrome werden aufgrund der Richtlinie für denselben Ursprung nicht unterstützt.

Die Fehlermeldung auf Chrome lautet wie folgt: "Ursprungsübergreifende Anforderungen werden für Protokollschemata nicht unterstützt: http, data, chrome, chrome-extension, https."

Dies bedeutet, dass Chrome für jede Domäne eine virtuelle Festplatte erstellt, auf der die von der Domäne bereitgestellten Dateien mithilfe von http / https-Protokollen gespeichert werden. Jeder Zugriff auf Dateien außerhalb dieser virtuellen Festplatte unterliegt derselben Ursprungsrichtlinie. AJAX-Anfragen und -Antworten erfolgen unter http / https und funktionieren daher nicht für lokale Dateien.

Firefox legt keine solche Einschränkung fest, daher funktioniert Ihr Code auf dem Firefox problemlos. Es gibt jedoch auch Problemumgehungen für Chrom: siehe hier .

— Sushant T.
quelle

0

Sie können meine Bibliothek importieren:

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

Erweitern Sie das Snippet

Anschließend gibt die Funktion fetchfile(path)die hochgeladene Datei zurück

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

Erweitern Sie das Snippet

Bitte beachten Sie: Wenn der HTML-Code in Google Chrome lokal ist, werden Fehler angezeigt. Das Speichern des HTML-Codes und der Dateien online und das Ausführen der Online-HTML-Datei funktioniert jedoch.

0

Um einen lokalen Dateitext JavaScriptmithilfe von Chrome zu lesen , sollte der Chrome-Browser mit dem Argument ausgeführt werden --allow-file-access-from-files, damit JavaScript auf lokale Dateien zugreifen kann. Anschließend können Sie ihn XmlHttpRequestwie folgt lesen :

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
quelle

0

Wie lese ich eine lokale Datei?

Wenn Sie dies verwenden, laden Sie eine Datei mit loadText (). Anschließend wartet JS asynchron, bis die Datei gelesen und geladen wurde. Anschließend wird die Funktion readText () ausgeführt, sodass Sie mit Ihrer normalen JS-Logik fortfahren können (Sie können auch einen Try-Catch schreiben Blockieren Sie die Funktion loadText (), falls ein Fehler auftritt), aber für dieses Beispiel halte ich sie auf einem 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
quelle

Es scheint, als hätten Sie einen Fall von function-itis

— Sapphire_Brick

0

Ich weiß, ich bin zu spät auf dieser Party. Lassen Sie mich Ihnen zeigen, was ich habe.

Dies ist ein einfaches Lesen der Textdatei

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

Ich hoffe das hilft.

— Aljohn Yamaro
quelle