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

How to read simultaneously two text files using HTML5 and Javascript

本文关键字：两个 文件 文本 读取 HTML5 何使用 Javascript      更新时间：2023-09-26

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

对于我一直在尝试的第二个文件：var file2 = files[1];并在 html 输入中添加一个multiple，但我如何为reader.onload = function (e) {部分执行此操作？我想以相同的方式解析两个文件，而不仅仅是一个。

这是代码（简化）：

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

您只需要为每个文件初始化一个 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>
相关文章：