html中导入文件并显示

html中导入文件并显示

主要使用到：
1、input file <input type="file"/>
2. FileReade FileReader

步骤：

1. <input type="file"/> 导入文件 input file

2. const file = e.target.files[0]获取文件信息

3. const reader = new FileReader();
   FileReade对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

4. reader.readAsText(file) 将文件读取为文本

5. reader.onload = () => { console.log(reader.result) } 文件读取完成后的回调

html

 <!--导入选择文件-->
<input type="file" id="upload" name="upload" accept=".txt, .doc, .docx"/> <br />
<!--显示内容-->
<div class="show"></div>

js

let upload = document.querySelector('#upload')
let show = document.querySelector('.show')

let word = ''

upload.onchange = function (e) {
    const file = e.target.files[0]; // 文件信息
    if (file) {
        const reader = new FileReader();
        reader.readAsText(file); // 将文件读取为文本
        reader.onload = () => { // 文件读取完成后的回调
            show.textContent = reader.result
        }
        reader.onerror = (e) => {
            console.log(e)
        }
    }
}