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

Question

我正在使用 HTML5 和 JavaScript 来读取文本文件，但现在我需要准确读取 2 个文本文件并执行与之前相同的操作，但对这两个文件进行操作。

对于我一直在尝试的第二个文件：var file2 = files[1]; 并在 html 输入中添加一个 multiple，但是我如何为 [=15= 添加一个 multiple ] 部分？我想用同样的方式解析两个文件，而不是一个。

这是代码（简化）：

<!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

您只需要为每个文件初始化一个FileReader，并为每个文件启动readAsText。功能将是相同的，我修改了输出，因此内容不会随着每个加载的文件而被清除。

    <!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 同时读取两个文本文件

How to read simultaneously two text files using HTML5 and Javascript

html

javascript

filereader