What is the right way to read a text file on my computer and display its content on my website using JavaScript and HTML?



por

Here’s an example using the file input element and FileReader(): File Input test

HTML:

  1.  
  2.  
  3.  

JS:

  1. var fileContents = document.getElementById('file-contents'); 
  2. var fileInput = document.getElementById('file-input'); 
  3. var reader = new FileReader(); 
  4.  
  5. reader.addEventListener('load', (ev)=>{ 
  6. fileContents.value = ev.target.result; 
  7. }); 
  8.  
  9. fileInput.addEventListener('change', (ev)=>{ 
  10. reader.readAsText(ev.target.files[0]) 
  11. }); 

This is a good purely client-side solution if you’re trying to read client-side files in the browser. Si desea publicar el contenido del archivo cargado en su sitio, entonces tendrá que configurar algún tipo de servicio de back-end, en cuyo caso podría ser preferible simplemente subir el archivo(s) de texto a su servidor (puede hacerlo de forma asíncrona a través de un POST de formulario o incluso simplemente utilizando el FileReader y enviando los datos al servidor a través de WebSocket).