使用 <input type="file"> 元素并利用 filereader api 可以通過 html 讀取文本文件。最佳實踐包括使用 accept 屬性過濾文件類型，利用 multiple 屬性選擇多個文件，以及通過 onchange 事件處理程序讀取文件。一個實戰案例演示了如何讀取文本文件并顯示其內容，利用 filereader 的 readastext() 方法將文件內容加載到一個變量中。

使用 HTML讀取文本文件可以通過 元素實現，它允許用戶選擇要讀取的文件。

<input type="file" id="file-input">

最佳實踐：

使用 屬性過濾文件類型： 例如，利用 屬性選擇多個文件： 處理文件： 使用 事件處理程序獲取和讀取文件。使用 API： API 提供了讀取文件內容的方法，如 考慮安全性： 僅讀取用戶上傳到您的服務器的已知和受信任的文件。

實戰案例：

讀取一個文本文件并顯示其內容：

<input type="file" id="file-input">

<script>
  const input = document.getElementById('file-input');

  input.addEventListener('change', function() {
    const file = input.files[0]; // 獲取第一個文件
    const reader = new FileReader();

    reader.onload = function() {
      const text = reader.result; // 已讀取的文件內容
      // 在此使用 `text` 變量
    };

    reader.readAsText(file);
  });
</script>