HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Read text file</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 40rem; margin: 2rem auto; padding: 0 1rem; }
    pre { background: #f8fafc; border: 1px solid #e2e8f0; padding: 1rem; border-radius: 8px; min-height: 6rem; white-space: pre-wrap; word-break: break-word; }
  </style>
</head>
<body>
  <h1>Read a text file</h1>
  <p>Select a .txt or other plain-text file.</p>
  <input type="file" id="fileInput" accept=".txt,text/plain">
  <pre id="fileContent">File contents will appear here.</pre>
  <script>
    document.getElementById("fileInput").addEventListener("change", function (event) {
      var file = event.target.files[0];
      var output = document.getElementById("fileContent");
      if (!file) return;

      var reader = new FileReader();
      reader.onload = function (e) {
        output.textContent = e.target.result;
      };
      reader.onerror = function () {
        output.textContent = "Error reading file.";
      };
      output.textContent = "Reading " + file.name + "…";
      reader.readAsText(file);
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

JavaScript File Handling — read text (Try It)