Rumah  >  Artikel  >  hujung hadapan web  >  如何从 HTML 中读取文本文件

如何从 HTML 中读取文本文件

PHPz
PHPzasal
2024-04-09 13:48:011314semak imbas

HTML tidak boleh membaca fail teks secara langsung. Ia boleh dilaksanakan menggunakan API FileReader melalui JavaScript: 1. Dapatkan elemen input fail 2. Dengarkan acara pemilihan fail 3. Buat objek FileReader 4. Dengarkan acara selesai memuatkan; ; 6. Proseskannya dalam pengendali acara Teks dibaca.

如何从 HTML 中读取文本文件

Cara membaca fail teks daripada HTML

Fail teks tidak boleh dibaca terus dalam HTML, tetapi ia boleh dicapai melalui JavaScript menggunakan FileReader API.

// 获取文件输入元素
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);
});

Kes praktikal: Membaca fail CSV yang dipilih oleh pengguna

<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>

Atas ialah kandungan terperinci 如何从 HTML 中读取文本文件. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:Artikel seterusnya: