Me gustaría buscar ayuda con respecto a cargar el contenido del archivo txt a la variable usando el elemento de entrada en javascript.
Así que estoy trabajando con un archivo de script Java separado del archivo html, y cuando el usuario hace clic en el botón para cargar el archivo desde el lado html como se muestra a continuación:
<input type="file" id="selectedFile" accept=".txt" />dispara el evento onchange como se muestra a continuación
document.getElementById('selectedFile').addEventListener('change', function () { var fr = new FileReader(); fr.onload = function () { document.getElementById('display').textContent = fr.result; console.log(fr.result); } fr.readAsText(this.files[0]); })Básicamente, si registro en la consola el fr.result como en el código, puedo ver el contenido sin problemas, y también tengo un elemento div con id "display" y el contenido se actualiza sin problemas. sin embargo, no puedo obtener el fr.result para almacenarlo en una variable global y usarlo más adelante en mi código. Probé el siguiente código:
let test = ""; document.getElementById('selectedFile').addEventListener('change', function () { var fr = new FileReader(); fr.onload = function () { document.getElementById('display').textContent = fr.result; test = fr.result; } fr.readAsText(this.files[0]); }) console.log(test);pero la variable de prueba en la consola sale vacía y se ejecuta incluso antes de que elija el archivo con el elemento de entrada. ¿Algún consejo sobre lo que me falta aquí y cómo puedo obtener el contenido del archivo usando el mismo método para almacenarlo en una variable? ¡Gracias!
Lo probé, funciona así, tal vez porque su función de escucha de eventos era una función anónima, y no puede llamar a this en una función anónima
<input type="file" id="selectedFile"> <p id="display"></p> <script> var fr = new FileReader(); let test; document.getElementById('selectedFile').addEventListener('change', x); function x() { fr.onload = ()=>{ document.getElementById('display').innerText = fr.result; console.log(fr.result); test = fr.result; } fr.readAsText(this.files[0]); } console.log(test);</script>