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



di

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. Se vuoi pubblicare il contenuto del file caricato sul tuo sito, allora avrai bisogno di impostare un qualche tipo di servizio back-end, nel qual caso potrebbe essere preferibile caricare semplicemente i file di testo sul tuo server (puoi farlo in modo asincrono tramite un POST del modulo o anche solo usando il FileReader e inviando i dati al server tramite WebSocket).