html中导入文件并显示

最新推荐文章于 2025-03-19 23:41:33 发布

又一又

最新推荐文章于 2025-03-19 23:41:33 发布

阅读量3.5k

点赞数

文章标签：网络 node.js 服务器

本文链接：https://blog.youkuaiyun.com/weixin_52335549/article/details/123266225

版权

本文介绍了在HTML中如何导入并显示文件，主要利用input file元素和FileReader对象。通过input file选择文件，FileReader用于异步读取文件内容，可将文件读取为文本并在读取完成后触发回调函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html中导入文件并显示

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

步骤：

<input type="file"/> 导入文件 input file
const file = e.target.files[0]获取文件信息
const reader = new FileReader();
FileReade对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
reader.readAsText(file) 将文件读取为文本
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)
        }
    }
}