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



par

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 vous voulez publier le contenu du fichier chargé sur votre site, alors vous devrez configurer une sorte de service back-end, auquel cas il pourrait être préférable de simplement télécharger le(s) fichier(s) texte sur votre serveur (vous pouvez le faire de manière asynchrone via un formulaire POST ou même simplement en utilisant le FileReader et en envoyant les données au serveur via WebSocket).