So lesen Sie eine Textdatei aus HTML

PHPz
Freigeben: 2024-04-09 13:48:01
Original
1291 Leute haben es durchsucht

HTML kann Textdateien nicht direkt lesen. Es kann mit der FileReader-API über JavaScript implementiert werden: 1. Holen Sie sich das Dateiauswahlereignis. 3. Erstellen Sie ein FileReader-Objekt. 5. Holen Sie sich den Dateiinhalt ; 6. Verarbeiten Sie es im Event-Handler. Der Text wird gelesen.

如何从 HTML 中读取文本文件

So lesen Sie Textdateien aus HTML

Textdateien können nicht direkt in HTML gelesen werden, aber dies kann über JavaScript mithilfe der FileReader-API erreicht werden.

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

Praktischer Fall: Lesen der vom Benutzer ausgewählten CSV-Datei

<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>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo lesen Sie eine Textdatei aus HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage