PHPz
Lepaskan: 2024-04-09 13:48:01
asal
1291 orang telah melayarinya

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);
});
Salin selepas log masuk

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>
Salin selepas log masuk

Atas ialah kandungan terperinci . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan