wake-up-neo.net

Wie lese ich eine lokale Textdatei?

Ich versuche, einen einfachen Textdatei-Reader zu schreiben, indem ich eine Funktion schreibe, die den Dateipfad übernimmt und jede Textzeile in ein Char-Array umwandelt, 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 etwas von einer vorherigen Version geändert wurde. Jetzt wird mir eine XMLHttpRequest-Ausnahme 101 angezeigt.

Ich habe dies auf Firefox getestet und es funktioniert, aber in Google Chrome funktioniert es einfach nicht und es gibt mir immer eine Ausnahme 101 )

javascriptfile-ioxmlhttprequest
273
Danny

Sie müssen nach Status 0 suchen (da beim lokalen Laden von Dateien mit XMLHttpRequest kein Status zurückgegeben wird, da er nicht von einer Webserver stammt

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");
257
Majid Laissi

Besuchen Sie Javascripture ! Und geh den Abschnitt readAsText und versuche das Beispiel. Sie werden wissen können, wie das geht readAsText Die 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>
72
Amit Chaurasia

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 gut in Firefox, aber es scheint, als würde die _fetch-Implementierung von Chrome das file:///-URL-Schema zum Zeitpunkt der Erstellung dieses Updates nicht unterstützen (getestet in Chrome 68).

66
Abdelaziz Mokhnache

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>

25
Poornachander K

Jon Perryman,

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

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

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

Damit js automatisch auf die lokalen fs zugreifen kann, ist es nicht erforderlich, eine HTML-Datei mit js darin zu erstellen, 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 ein Standardverhalten des Browsers.

Auch Google Chrome hat an der FSI API gearbeitet, weitere Infos hier: http://www.html5rocks.com/de/tutorials/file/filesystem/

13
Sparrow

Sie probieren es bereits, geben Sie "false" wie folgt ein:

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

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]);
}
12
Motsim Mansoor

anderes Beispiel - mein Reader mit der 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>
11
websky

Das 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();
6
Sameera R.
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

- Dateitext von Javascript lesen 
- Konsolentext aus Datei mit Javascript 
- Google Chrome und Mozilla Firefox 

In meinem Fall habe ich folgende Dateistruktur:  enter image description here

das Ergebnis von console.log: 
 enter image description here

2
nadir hamidou

Abruf- und Asynchronfunktion verwenden

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

logFileText('file.txt')
1
barro32
<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>
1
adithya

Lokale AJAX - Aufrufe in Chrome werden aufgrund derselben Origin-Richtlinie nicht unterstützt.

Wenn Sie die Konsolenprotokolle überprüfen, werden Sie feststellen, dass Cross Origin-Anforderungen für Protokollschemas nicht unterstützt werden: http, data, chrome, chrome-extension, https.

Das bedeutet im Wesentlichen, dass Chrome für jede Domäne eine Art virtuelles Laufwerk erstellt. Alle Dateien, die von der Domäne über die oben aufgeführten Protokolle bereitgestellt werden, werden darin gespeichert. Aus Sicherheitsgründen ist der Zugriff auf Dateien außerhalb der lokalen Festplatte unter derselben Origin-Richtlinie eingeschränkt. AJAX -Anfragen und -Antworten erfolgen im Wesentlichen unter http/https, daher nicht für lokale Dateien. 

Firefox nimmt diese Einschränkung nicht vor, daher funktioniert Ihr Code problemlos mit Firefox. Es gibt jedoch auch Problemumgehungen für Chrom: siehe hier .

1
Sushant T

Neben einigen der obigen Antworten funktionierte diese modifizierte Lösung für mich.

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

Sie können meine Bibliothek importieren: 

<script src="https://www.editeyusercontent.com/preview/1c_hhRGD3bhwOtWwfBD8QofW9rD3T1kbe/[email protected]"></script>

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

Bitte beachten Sie: Wenn der HTML-Code in Google Chrome lokal ist, werden Fehler angezeigt. Wenn Sie den HTML-Code und die Dateien jedoch online speichern, wird die Online-HTML-Datei ausgeführt.

0
Yikuan Sun

Lokale Dateidaten beim Laden von js (data.js) abrufen:

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

dynamic UnixTime QueryString verhindert zwischengespeicherte.

AJ arbeitet im Web http: //.

0
Lo Vega

Um einen lokalen Datei-Text durch JavaScript mit Chrome zu lesen, sollte der Chrome-Browser mit dem Argument --allow-file-access-from-files ausgeführt werden, damit JavaScript auf die lokale Datei zugreifen kann. Anschließend können Sie es mit XmlHttpRequest wie 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);
0
Ali Ezzat Odeh