Я создал программу, в которой пользователь загружает файл .txt. Теперь я хочу создать кнопку, на которой я нажимаю на нее, и она показывает содержимое файла .txt ** построчно с небольшой задержкой между **

document.getElementById('inputfile')
  .addEventListener('change', function() {

    var fr = new FileReader();
    fr.onload = function() {
      document.getElementById('output')
        .textContent = fr.result;
    }

    fr.readAsText(this.files[0]);
  })
<input type="file" name="inputfile" id="inputfile">
<br>
<pre id="output"></pre>
0
João Santos 22 Сен 2021 в 15:52

3 ответа

Лучший ответ
document.getElementById('inputfile')
    .addEventListener('change', function() {

        var fr = new FileReader();
        fr.onload = function() {
            if (!fr.result) { // if empty result do not execute below code
                return;
            }
            const resultAsArray = fr.result.split('\r\n'); // split the text into array by new line (\r\n)
            let index = 0; // Take the first line
            const displayInterval = setInterval(() => { // create an interval that executes every 1 second
                if (index === (resultAsArray.length - 1)) { // check if the current index is equal to last item index
                    clearInterval(displayInterval); // if true, exit the interval
                     return;
                }
                let html$ = document.getElementById('output').innerHTML; // capture previous html
                html$ += '<div>' + resultAsArray[index] + '</div>'; // append new line data to previous html
                document.getElementById('output').innerHTML = html$; // display the data into output element
                index++; // increment for the next line

            }, 1000);

        }

        fr.readAsText(this.files[0]);

    })
<input type="file" name="inputfile"
        id="inputfile">
<br>

<div id="output"></div>

Проверить содержимое файла text.txt

lorem
ipsum
generator
0
Alaksandar Jesus Gene 22 Сен 2021 в 13:19

Вместо этого я использую ul, вы можете поиграть с ним.

document.getElementById('inputfile')
    .addEventListener('change', function() {
        var fr = new FileReader();
        const output = document.getElementById('output');
        fr.onload = function() {
            const lines = fr.result.split('\n');
            lines.forEach((line) => {
                var li = document.createElement("li");
                li.appendChild(document.createTextNode(line))
                output.appendChild(li);
            });
        }
        fr.readAsText(this.files[0]);
    })
<input type="file" name="inputfile" id="inputfile">
<br>
<ul id="output"></ul>
0
hacKaTun3s 22 Сен 2021 в 13:02

Вы можете сделать это, написав метод добавления по одной строке с интервалом:

const displayLines = (elem, text, delay) =>{
  let lineNo = 0;
  const lines = text.split("\r\n");
  const intervalId = setInterval( () => {
      elem.textContent += (lines[lineNo++] + "\r\n");
      if(lines.length == lineNo)
          clearInterval(intervalId);
  },delay);
}

А затем позвоните из onload. Живой пример ниже:

document.getElementById('inputfile')
  .addEventListener('change', function() {

    var fr = new FileReader();
    fr.onload = function() {
      displayLines(document.getElementById('output'), fr.result, 1000);
    }

    fr.readAsText(this.files[0]);
  })
  
  
const displayLines = (elem, text, delay) =>{
  let lineNo = 0;
  const lines = text.split("\r\n");
  const intervalId = setInterval( () => {
      elem.textContent += (lines[lineNo++] + "\r\n");
      if(lines.length == lineNo)
          clearInterval(intervalId);
  },delay);
}
<input type="file" name="inputfile" id="inputfile">
<br>
<pre id="output"></pre>
0
Jamiec 22 Сен 2021 в 13:03