Wczytanie pliku tekstowego i rozdzielenie lini

0

Witajcie.
Mam taki problem.
Wczytałem plik tekstowy za pomocą Reader.
http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api
Plik wygląda następująco:

abcd
efgh
ijklmno

Chciałbym aby każdą linię rozdzielić do osobnych elementów tablicy aby móc łatwo tym operować.
Chciałem "przejechać" każdy znak zmiennej do której wczytałem zawartość pliku ale nie mogę ponieważ zmienna jest nie określonego typu.

Uncaught TypeError: Cannot read property 'length' of undefined
at HTMLInputElement.<anonymous>

Co mogę zrobić by skonwertować ją do stringa?
Ostatecznie chciałbym każda linię wezucić do osobnego elementu tablicy więc jeśli znacie jakieś lepsze sposoby to piszcie.


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Tytuł</title>

</head>

<body>

    <div>
        Wybierz plik:
        <input type="file" id="fileInput">
    </div>
    <pre id="fileDisplayArea"><pre>
    <script>
        var wyj;
        window.onload = function() {
            var fileInput = document.getElementById('fileInput');
            var fileDisplayArea = document.getElementById('fileDisplayArea');

            fileInput.addEventListener('change', function(e) {
                var file = fileInput.files[0];
                var textType = /text.*/;

                if (file.type.match(textType)) {
                    var reader = new FileReader();
                    
                    reader.onload = function(e) {
                        wyj = reader.result;
                        fileDisplayArea.innerText = wyj;
                    }
                    reader.readAsText(file);
                    
                    for(var i = 0; i < wyj.length; i++);
                        //console.log(wyj.charAt(i));
                } else {
                    fileDisplayArea.innerText = "File not supported!"
                }
            });
        }

    </script>
</body>

</html>
1

readAsText działa asynchronicznie, czyli bezpośrednio po wykonaniu reader.readAsText(file);, wyj jeszcze nie jest ustawione.

0

Zauważ, że to co masz w funkcji przypisanej do onload wykonane zostanie dopiero w przyszłości. W momencie przypisania funkcji właściwie nic się nie stanie (poza ustaleniem akcji na wczytanie tekstu). Dlatego też w tej funkcji powinna się znaleźć cała obróbka tego wczytanego tekstu. Linię za readAsText() wynik działania jest nieznany, bo działanie jest asynchroniczne. Tak więc bardziej coś takiego:

reader.onload = function(e) {
    wyj = reader.result;
    fileDisplayArea.innerText = wyj;
    wyj.split( "\n" ).forEach( function( line ) {
        // akcja dla każdej linii
    } );
}

1 użytkowników online, w tym zalogowanych: 0, gości: 1