text-Datei einlesen und den Inhalt als Variable nutzen

[wireless-dj]

Moin,

Ich möchte in PHP eine lokale Text Datei auswählen, einlesen, und als Variable in einem Formular nutzen.
Das will mir nicht gelingen.

Man kann ja mit <input type="file" name="inputfile" id="inputfile"> eine Datei auswählen. Soweit verstanden.
Auch wenn mir der Button eigentlich zu groß ist, und ich das lieber als href auslösen würde...

Den Inhalt dieser Datei möchte ich nun "onclick", oder "onload" in einer PHP-Variablen ablegen, um sie dann in ein Formular zu laden.
Es scheitert schon daran, den Inhalt in eine PHP-Variable zu speichern. Bei meiner Suche bin ich nun auf ein Javascript gekommen:

<input type="file" name="inputfile" id="inputfile">
    <br>
 
    <pre id="output"></pre>
 
    <script type="text/javascript">
        document.getElementById('inputfile')
            .addEventListener('change', function () {
 
                let fr = new FileReader();
                fr.onload = function () {
                    document.getElementById('output')
                        .textContent = fr.result;
                }
 
                fr.readAsBinaryString(this.files[0]);
            })
    </script>

Das macht im Grunde, was ich suche, auch direkt gleich, wenn die Datei ausgewählt wurde ( also "onclick" ), aber:
Ich möchte das Ergebnis nicht in dem <pre id="output"></pre> sehen, sondern in einer PHP-Variablen haben.
Von dieser Variablen teile ich den Inhalt auf, und verteile den Inhalt in dann einem Formular.

Man kann mein Vorhaben vergleichen mit dem Einlesen einer .csv Datei, die man in einem PHP Formular kontrollieren, ggfs. bearbeiten, und dann speichern möchte. Sprich:
Klick ->
Datei auswählen ->
Inhalt der Datei wird geladen und in einer PHP-Variablen abgelegt ->
Verarbeitung ->
Einzelne Teile des Inhalts werden als Values auf verschiedene Textareas und Textboxen verteilt ->
Gucken, ob alles passt ->
Klick ->
Formular abgesendet und gespeichert.

Ich hoffe, Ihr versteht, was ich meine.

Danke & Gruß,

Volker

 

[Sempervivum]

Hallo Volker,
Du schriebst:

Den Inhalt dieser Datei möchte ich nun "onclick", oder "onload" in einer PHP-Variablen ablegen, um sie dann in ein Formular zu laden.

und:

Klick ->
Datei auswählen ->
Inhalt der Datei wird geladen und in einer PHP-Variablen abgelegt ->
Verarbeitung ->
Einzelne Teile des Inhalts werden als Values auf verschiedene Textareas und Textboxen verteilt ->
Gucken, ob alles passt ->
Klick ->
Formular abgesendet und gespeichert.

Wenn der Inhalt der Datei am Schluss auf Elemente eines Formulars verteilt werden soll braucht es IMO nicht den Umweg über eine PHP-Variable. Du kannst den Inhalt auch gleich mit Javascript verarbeiten und das Formular damit vorbereiten.

Und wenn es sich um eine Textdatei handelt ist readAsBinaryString eher ungeeignet, verwende statt dessen readAsText.

 

[wireless-dj]

Hallo Ulrich,

lange nichts gehört - ich hoffe, Dir geht's gut?!

Wenn der Inhalt der Datei am Schluss auf Elemente eines Formulars verteilt werden soll braucht es IMO nicht den Umweg über eine PHP-Variable.

Das mag sein, aber ich hab ja immer gerne kleine Schritte für mein Verständnis, und ich bin mir noch nicht sicher, ob ich diese Variable nicht noch an anderer Stelle brauche. Deswegen wäre mir das lieber....

Und wenn es sich um eine Textdatei handelt ist readAsBinaryString eher ungeeignet, verwende statt dessen readAsText.

OK, das erübrigt dann auch das Problem mit den Umlauten.

- Aber, wie bekomme ich das nun in eine Variable?
- und, geht das auch mit einem href ?

 

[Sempervivum]

Ich wüsste nicht, wie das mit einem href gehen kann.

Ich denke, der Zwischenschritt über PHP erschwert eher das Verständnis, aber wenn Du es so möchtest, sehe ich zwei Möglichkeiten:

1. Ein Formular mit dem file-Input darin verwenden. Dann brauchst Du zunächst kein Javascript, sondern die Datei wird nach dem Auswählen und dem Submit an den Server geschickt und Du findest sie im PHP-Skript unter $_FILES["name-des-file-input"]["tmp_name"][0] und kannst sie weiter verarbeiten und das endgültige Formular erzeugen.
2. Bei dem Weg mit dem FileReader bleiben und den Text aus der Datei mit fetch an den Server schicken. Der Server bzw. das PHP-Skript kann den Text dann auswerten und das Formular zurück geben. Du kannst es dann, wie in deinem Beispiel, in einen Container eintragen.

 

[wireless-dj]

Das ist beides blöd, da ich die Datei als Solche dann ja zwischen speichern muss.

Wie würde es denn aussehen, wenn der Inhalt der Datei auf Formularfelder direkt verteilt wird?

 

[Sempervivum]

Ungetestet würde das so aussehen:

    <form>
        <input type="text" id="input1">
    </form>
    <input type="file" name="inputfile" id="inputfile">
    <script>
        document.getElementById('inputfile')
            .addEventListener('change', function () {

                let fr = new FileReader();
                fr.onload = function () {
                    text = fr.result;
                    // Hier kannst Du den Text auswerten und die
                    // Bestandteile in Variablen speichern, z. B.
                    // txtForInput1
                    document.getElementById('input1').value = txtForInput1;
                }
                fr.readAsText(this.files[0]);
            });

 

[wireless-dj]

Danke, aber damit komme ich nicht weiter.
Wenn ich das richtig verstehe, soll der Inhalt dann im <input type="text" id="input1"> landen - macht er nicht.
Und zum Auswerten innerhalb der Funktion fehlt mir das Wissen in JavaScript.

 

[Sempervivum]

Ohne die Auswertung kann es auch nicht funktionieren. Um dir dafür Hinweise zu geben, muss man jedoch die Struktur des Textes kennen. Wenn sie nicht zu groß ist, dann häng doch mal solch eine Datei an. CSV ist es ja wahrscheinlich nicht, sonst hättest Du es geschrieben.

 

[wireless-dj]

Nimm z.B. eine .vcf Datei. Die sind Textbasiert, klein, und einfach zu lesen.

Das Ganze wird für ähnliche Textdateien verwendet, die Bestandteile haben, die durch
irgendwelche Sonderzeichen getrennt sind. Es soll auf lange Sicht mit vielen kleinen
Textdateien umgehen können, also sehr universell einsetzbar sein. Deswegen wäre es
mir auch wichtig, die einzelnen Werte in Variablen zu packen, um diese evtl. an anderer
Stelle nutzen zu können, aber wenn das umständlicher wird, dann direkt ins Formular.

Ich hab mal eine einfache .vcf angehängt.
Die musste ich nur mit der Endung .txt versehen, sonst hätte ich sie nicht anhängen können.

 

[Sempervivum]

Das hilft schon Mal ein ganzes Stück weiter. In dem Fall würde ich nicht das Rad neu erfinden und den Text manuell auswerten sondern einen fertigen Parser für vCard verwenden. Ich finde z. B. diesen:
GitHub - ertant/vCard: vCard parser in javascript
Damit würde das so aussehen (jetzt getestet mit deiner Datei):

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Load And Parse vCard File</title>
    <style>
        .dataset.clicked {
            background-color: lightblue;
        }
    </style>
    <script src="js/vcard-parser.js"></script>
</head>

<body>
    <form>
        <input type="text" id="display-name">
    </form>
    <input type="file" name="inputfile" id="inputfile">
    <script>
        document.getElementById('inputfile')
            .addEventListener('change', function () {

                let fr = new FileReader();
                fr.onload = function () {
                    // Text mit dem vCard-Parser auswerten,
                    // dann stehen die Werte im Objekt parsed zur Verfügung:
                    const parsed = vCardParser.parse(fr.result);
                    console.log(parsed);
                    // Beispiel: Angezeigten Namen in Eingabefeld eintragen:
                    document.getElementById('display-name').value = parsed[0].displayName;
                }
                fr.readAsText(this.files[0]);
            });
    </script>
</body>

</html>

Die Struktur kannst Du dann jederzeit in der Console nachsehen.