547 Stimmen

Danny avatar

Wie kann man eine lokale Textdatei im Browser lesen?

Gefragt el 21 de Januar, 2013
Wann wurde die Frage gestellt
1779804 Ansichten
Anzahl der Besuche der Frage
5 Antworten
Anzahl der Fragenantworten
Gelöst
Aktueller Status der Frage

Ich versuche, einen einfachen Text-Datei-Leser zu implementieren, indem Sie eine Funktion erstellen, die in den Pfad der Datei nimmt und konvertiert jede Zeile Text in ein Char-Array, 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 schief?

Dies scheint immer noch nicht zu funktionieren, nachdem ich den Code ein wenig von einer vorherige Revision und jetzt bekomme ich eine XMLHttpRequest Ausnahme 101.

Ich habe dies mit Firefox getestet und es funktioniert, aber in Google Chrome funktioniert es einfach nicht und ich erhalte immer eine Exception 101. Wie kann ich dies nicht nur in Firefox, sondern auch in anderen Browsern (insbesondere Chrome) zum Laufen bringen?

Gefragt el 21 de Januar, 2013 von Danny

Antworten

Zu viele Anzeigen?

36voto

Sparrow avatar
Sparrow Punkte 351

Ja, JS kann lokale Dateien lesen (siehe FileReader()), aber nicht automatisch: der Benutzer muss dem Skript die Datei oder eine Liste von Dateien mit einem html <input type="file"> .

Mit JS ist es dann möglich, die Datei oder die Liste der Dateien, einige ihrer Eigenschaften und den Inhalt der Datei oder der Dateien zu bearbeiten (z. B. anzuzeigen).

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

Damit JS automatisch auf die lokale Festplatte zugreifen kann, muss keine HTML-Datei mit JS darin, sondern ein HTA-Dokument erstellt werden.

Eine hta-Datei kann JS oder VBS enthalten.

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

Dies ist das Standardverhalten eines Browsers.

Auch Google Chrome arbeitete an der fs-API, mehr dazu hier: http://www.html5rocks.com/en/tutorials/file/filesystem/

Beantwortet el 29 de Januar, 2016 von Sparrow (351 Punkte )

18voto

barro32 avatar
barro32 Punkte 2156

Verwendung von abrufen. und asynchrone Funktion

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

logFileText('file.txt')
Beantwortet el 8 de Januar, 2019 von barro32 (2156 Punkte )

12voto

momen avatar
momen Punkte 129

Wahrscheinlich haben Sie es schon versucht, aber geben Sie "false" wie folgt ein:

     rawFile.open("GET", file, false);
Beantwortet el 26 de November, 2013 von momen (129 Punkte )

12voto

Motsim Mansoor avatar
Motsim Mansoor Punkte 129

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]);
}
Beantwortet el 17 de Oktober, 2013 von Motsim Mansoor (129 Punkte )

11voto

websky avatar
websky Punkte 2832

Anderes Beispiel - mein Reader 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>
Beantwortet el 19 de Februar, 2015 von websky (2832 Punkte )

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

Yandex
X