Creé un programa donde el usuario sube un archivo .txt. Ahora quiero crear un botón donde haga clic en él y muestre el contenido del archivo .txt ** línea por línea con un poco de retraso entre **
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> 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>Probar el contenido del archivo text.txt
lorem ipsum generatorYo uso una ul en su lugar, puedes jugar con ella.
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>Puede hacer esto escribiendo un método para agregar una línea a la vez con un intervalo:
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); } Y luego llame a esto desde onload . Ejemplo en vivo a continuación:
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>