以html读取本地txt并展示 ,写出详细代码
时间: 2024-05-01 20:17:20 浏览: 19
好的,以下是使用 HTML 读取本地 TXT 文件并展示的详细代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>读取本地 txt 文件并展示</title>
<meta charset="UTF-8">
</head>
<body>
<input type="file" id="txtFileInput"><br>
<pre id="txtContent"></pre>
<script>
// 获取 input 元素
var txtFileInput = document.getElementById("txtFileInput");
// 监听 input 元素的 onchange 事件
txtFileInput.addEventListener("change", function() {
// 获取选中的文件对象
var file = txtFileInput.files[0];
// 创建 FileReader 对象
var fileReader = new FileReader();
// 监听 FileReader 对象的 onload 事件
fileReader.onload = function() {
// 获取文件内容并展示到 pre 元素中
var txtContent = document.getElementById("txtContent");
txtContent.innerHTML = fileReader.result;
};
// 读取文件内容
fileReader.readAsText(file, "UTF-8");
});
</script>
</body>
</html>
```
代码解释:
1. 在 HTML 中添加一个 `input` 元素用于选择要读取的本地 txt 文件,一个 `pre` 元素用于展示文件内容。
2. 使用 JavaScript 监听 `input` 元素的 `change` 事件,获取选中的文件对象。
3. 创建 `FileReader` 对象,监听 `onload` 事件,读取文件内容并展示到 `pre` 元素中。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)