How to read text file from HTML

HTML cannot read text files directly. It can be implemented using the FileReader API through JavaScript: 1. Get the file input element; 2. Listen to the file selection event; 3. Create a FileReader object; 4. Listen to the loading completion event; 5. Get the file content; 6. Process it in the event handler The text read.

How to read text files from HTML

Text files cannot be read directly in HTML, but they can be used through JavaScriptFileReader API implementation.

// 获取文件输入元素
const fileInput = document.querySelector('input[type=file]');

// 监听文件选择事件
fileInput.addEventListener('change', (e) => {
  // 获取选中的文件
  const file = e.target.files[0];

  // 创建一个新的 FileReader 对象
  const reader = new FileReader();

  // 监听加载完成事件
  reader.onload = (e) => {
    // 获取文件内容
    const text = e.target.result;

    // 在这里处理读取到的文本
    console.log(text);
  };

  // 开始读取文件
  reader.readAsText(file);
});

Practical case: Reading the CSV file selected by the user

<input type="file" accept=".csv" id="csv-input">

<script>
  const csvInput = document.querySelector('#csv-input');

  csvInput.addEventListener('change', (e) => {
    const file = e.target.files[0];

    const reader = new FileReader();

    reader.onload = (e) => {
      const csvData = e.target.result;

      // 将 CSV 数据解析为数组
      const dataArray = csvData.split('\n');

      // 遍历数组并打印每个元素
      dataArray.forEach((row) => {
        console.log(row);
      });
    };

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

The above is the detailed content of How to read text file from HTML. For more information, please follow other related articles on the PHP Chinese website!