Wie kann man eine lokale Textdatei im Browser lesen?

Question

Wie kann man eine lokale Textdatei im Browser lesen?

Gefragt el 21 de Januar, 2013: Wann wurde die Frage gestellt
1779803 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

Answer 1

5 Antworten

Answer 2

2voto

Fabii Punkte 3710

In Ergänzung zu einigen der obigen Antworten hat diese modifizierte Lösung bei mir 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);
            }
        }
    }     
}

Beantwortet el 31 de Dezember, 2018 von Fabii (3710 Punkte )

Answer 3

2voto

Lo Vega Punkte 91

Abrufen lokaler 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 Caching.

AJ arbeitet im Internet unter http://.

Beantwortet el 26 de April, 2019 von Lo Vega (91 Punkte )

Answer 4

2voto

yaya Punkte 6190

Wenn Sie den Benutzer auffordern möchten, eine Datei auszuwählen, und dann deren Inhalt lesen möchten:

// read the contents of a file input
const readInputFile = (inputElement, callback) => {
  const reader = new FileReader();
  reader.onload = () => {
    callback(reader.result)
  };
  reader.readAsText(inputElement.files[0]);
};
// create a file input and destroy it after reading it
const openFile = (callback) => {
  var el = document.createElement('input');
  el.setAttribute('type', 'file');
  el.style.display = 'none';
  document.body.appendChild(el);
  el.onchange = () => {readInputFile(el, (data) => {
    callback(data)
    document.body.removeChild(el);
  })}
  el.click();
}

Verwendung:

// prompt the user to select a file and read it
openFile(data => {
    console.log(data)
  })

Beantwortet el 16 de Dezember, 2020 von yaya (6190 Punkte )

Answer 5

1voto

adithya Punkte 11

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

Beantwortet el 22 de Februar, 2018 von adithya (11 Punkte )

Answer 6

1voto

MSS Punkte 3168

Diese Funktion wurde für Browser entwickelt und öffnet einen Dateiauswahldialog. Nach der Benutzerauswahl wird die Datei als Binärdatei gelesen und eine Callback-Funktion mit den gelesenen Daten aufgerufen:

function pickAndReadFile(callback) {
    var el = document.createElement('input');
    el.setAttribute('type', 'file');
    el.style.display = 'none';
    document.body.appendChild(el);
    el.onchange = function (){
        const reader = new FileReader();
        reader.onload = function () {
            callback(reader.result);
            document.body.removeChild(el);
        };
        reader.readAsBinaryString(el.files[0]);
    }
    el.click();
}

Und verwenden Sie es so:

pickAndReadFile(data => {
  console.log(data)
})

Beantwortet el 19 de Dezember, 2021 von MSS (3168 Punkte )

Wie kann man eine lokale Textdatei im Browser lesen?

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Wie kann man eine lokale Textdatei im Browser lesen?

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: