Wie kann ich eine txt-Datei über <input> mit JS in eine Liste einlesen?

2 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet
Dory1
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
JavaScript
15.11.2019, 15:24

Habe gerade mal ein wenig herumprobiert. So in etwa sollte es gehen:

html

<input type="file" id="files">

JavaScript

function handleFileSelect(evt) {
  var files = evt.target.files;
  for (var i = 0, f; (f = files[i]); i++) {
    var reader = new FileReader();
    reader.onload = (function(theFile) {
      return function(e) {
        var data = atob(e.target.result.split(",")[1]);
        // hier hast du nun Zugriff auf den Datei-Inhalt (data)
      };
    })(f);
    reader.readAsDataURL(f);
  }
}


document
  .getElementById("files")
  .addEventListener("change", handleFileSelect, false);
Dory1  15.11.2019, 15:36

Ah, es geht auch ohne dass ein explizites Dekodieren notwendig ist (readAsBinaryString anstatt readAsDataURL):

function handleFileSelect(evt) {
  var files = evt.target.files; // FileList object
  for (var i = 0, f; (f = files[i]); i++) {
    var reader = new FileReader();
    reader.onload = (function(theFile) {
      return function(e) {
        var data = e.target.result;
        // ...
      };
    })(f);
    reader.readAsBinaryString(f);
  }
}
Scamander1926 
Beitragsersteller
 15.11.2019, 17:52
@Dory1

Vielen vielen Dank. Kann man das auch in UTF-8 einlesen?

Scamander1926 
Beitragsersteller
 15.11.2019, 18:07
@Dory1

Ich habe es schon! Es ist dann 

reader.readAsText(f)

anstatt 

reader.readAsBinaryString(f)

. Danke
Scamander1926 
Beitragsersteller
 15.11.2019, 20:22

Ich bräuchte jetzt doch nochmal Hilfe 😬. Ich kann keine einziege String funktion auf data ausführen und auch "toString" hilft mir nicht. Wie kann ich mit der data Variable arbeiten?

Dory1  15.11.2019, 20:29
@Scamander1926

Was genau versuchst du denn? Kannst du den Code posten der nicht funktioniert?

Scamander1926 
Beitragsersteller
 15.11.2019, 20:41
@Dory1

Ich habe exakt den Code, den du mir geschickt verwendet und versuche jetzt das ganze in eine Liste umzuwandeln und es aus der Funktion zu bringen.

Dory1  15.11.2019, 20:42
@Scamander1926

Was meinst du mit Liste? Ein Array mit den einzelnen Zeilen der Textdatei?

Dory1  15.11.2019, 20:43
@Scamander1926 
var liste = e.target.result.split("\n");

Und was soll dann mit dem Array geschehen?

Scamander1926 
Beitragsersteller
 15.11.2019, 20:45
@Dory1

Ich will alle möglichen Daten eines exportierten WhatsApp Chats mit Chart.js grafisch darstellen.

Dory1  15.11.2019, 20:50
@Scamander1926

Dann müsstest du ja nur noch die Daten entsprechend aufbereiten und an Chart.js übergeben:

var liste = e.target.result.split("\n");
var config = {
    // ... irgendwas mit "liste"
};
var ctx = document.getElementById('dein-canvas').getContext('2d');
var chart = new Chart(ctx, config);
Scamander1926 
Beitragsersteller
 15.11.2019, 20:51
@Dory1

Ja genau, das habe ich schon :). Kannst du mir noch meine letzte Frage zu dem Thema beantworten? Wie kann ich data jetzt aus der Funktion bringen, ich kann ja nicht returnen, oder?

Dory1  15.11.2019, 20:55
@Scamander1926

Schreib doch einfach eine renderChart Funktion, die du mit den gewonnenen Daten aufrufst:

function renderChart(data) {
   var config = {
       // ... irgendwas mit "data"
   };
   var ctx = document.getElementById('dein-canvas').getContext('2d');
   var chart = new Chart(ctx, config);
   ...
}

function handleFileSelect(evt) {
   ...
   var data = e.target.result.split("\n");
   renderChart(data);
   ...
}
MonkeyKing
15.11.2019, 14:57

Per AJax/XMLHttpRequest

var request = new XMLHttpRequest();
 
request.onreadystatechange = function() {
  if(request.readyState === 4) {
    if(request.status === 200) { 
      console.log(request.responseText);
    } else {
      console.log("An error occured.");
    } 
  }
}
Woher ich das weiß:Berufserfahrung – 20 Jahre Berufserfahrung