如何使用HTML5和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. 我正在使用HTML5和JavaScript来读取文本文件，但是现在我需要准确地读取2个文本文件，并执行与之前相同的操作，只是对这两个文件。

For the second file I've been trying with: var file2 = files[1]; 对于第二个文件，我一直在尝试： 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? 并在html输入中添加一个multiple ，但是如何为reader.onload = function (e) {部分呢？ 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. 您只需要为每个文件初始化FileReader并为每个文件启动readAsText。 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>

如何使用HTML5和Javascript同时读取两个文本文件

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-04-21 12:12:35

如何使用HTML5和Javascript同时读取两个文本文件

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-04-21 12:12:35

解决方案1
0 已采纳 2016-04-21 12:12:35