How to read simultaneously two text files using HTML5 and Javascript

Question

I'm using HTML5 and JavaScript for reading a text file, but now I need to read exactly 2 text files and do the same operations as done before but for the two files.

For the second file I've been trying with: var file2 = files[1]; and add a multiple in the html input, but how can I do it for the reader.onload = function (e) { part? I want to parse the two files in the same way, not only one.

Here is the code (simplified):

<!DOCTYPE html>
<html>
<head>
<title>Read and Parse Lynis Log</title>

<script>

function processFiles(files) {
    var file = files[0];
    var reader = new FileReader();
    var textParsed = [];

    reader.onload = function (e) {
        var output = document.getElementById("fileOutput");
        output.textContent = e.target.result;

        var text = e.target.result;
        var lines = text.split("\n");

        for (var i= 0; i < lines.length; i++) {      
            textParsed[i] = lines[i];
        }

        var testsPerformed = null;
        var suggestions = [];
        var suggestion = null;
        var auxSug = null;
        for (var j = 0; j < lines.length; j++) {
            if (textParsed[j].includes("tests_executed")){
                testsPerformed = textParsed[j];
            }
            if (textParsed[j].includes("suggestion[]")) {
                suggestion = textParsed[j];
                suggestions.push(suggestion);
            }
        }

        if (typeof(Storage) !== "undefined" && textParsed.length >= 1) {
        //Store
        localStorage.setItem('storedText', textParsed);
        localStorage.setItem('tests', testsPerformed);
        localStorage.setItem('suggestions', suggestions);
        } 
    };
    reader.readAsText(file);
}

</script>
</head>

<body>
<input id="fileInput" placeholder=":input" type="file" size="50" onchange="processFiles(this.files)">
<div id="fileOutput"></div>
</body>
</html>

Answer 1

You only need to initialize a FileReader for each file and start readAsText for every file. The function will be the same, I've modify the output so the content is not cleared with each file that is loaded.

    <!DOCTYPE html>
    <html>
    <head>
    <title>Read and Parse Lynis Log</title>

    <script>
    function processFiles(files) {
            var file = files[0];

            var textParsed = [];

            function onReadAsText(e) {
                var output = document.getElementById("fileOutput");
                output.textContent = output.textContent + e.target.result;

                var text = e.target.result;
                var lines = text.split("\n");

                for (var i= 0; i < lines.length; i++) {      
                    textParsed[i] = lines[i];
                }

                var testsPerformed = null;
                var suggestions = [];
                var suggestion = null;
                var auxSug = null;
                for (var j = 0; j < lines.length; j++) {
                    if (textParsed[j].includes("tests_executed")){
                        testsPerformed = textParsed[j];
                    }
                    if (textParsed[j].includes("suggestion[]")) {
                        suggestion = textParsed[j];
                        suggestions.push(suggestion);
                    }
                }

                if (typeof(Storage) !== "undefined" && textParsed.length >= 1) {
                //Store
                localStorage.setItem('storedText', textParsed);
                localStorage.setItem('tests', testsPerformed);
                localStorage.setItem('suggestions', suggestions);
                } 
            };

            for (var i = 0; i < files.length; i++){
                var reader = new FileReader();
                reader.onload = onReadAsText;
                reader.readAsText(files[i]);
            }


        }
</script>
</head>

<body>
<input id="fileInput" placeholder=":input" type="file" size="50" onchange="processFiles(this.files)" multiple>
<div id="fileOutput"></div>
</body>
</html>

How to read simultaneously two text files using HTML5 and Javascript

Question

1 answers

solution1
0 ACCPTED 2016-04-21 12:12:35

How to read simultaneously two text files using HTML5 and Javascript

Question

1 answers

solution1 0 ACCPTED 2016-04-21 12:12:35

solution1
0 ACCPTED 2016-04-21 12:12:35