论坛 › 马黑黑教程专版 › JS : 打开本地文本文件演示

马黑黑 发表于 2024-1-21 08:53

JS : 打开本地文本文件演示

<style>
.ma {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
}
.ma > textarea {
        width: 600px;
        height: 300px;
}
</style>

<div class="ma">
        <input type="file" id="sFile" accept=".txt, .bat, .php">
        <textarea id="txtElm"></textarea>
</div>

<script>
sFile.onchange = function() {
        var reader = new FileReader();
        reader.readAsText(this.files);
        reader.onload = function() {
                txtElm.value = this.result;
        };
};
</script>

马黑黑 发表于 2024-1-21 08:53

一楼完整代码
<style>
.ma {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
}
.ma > textarea {
        width: 600px;
        height: 300px;
}
</style>

<div class="ma">
        <input type="file" id="sFile" accept=".txt, .bat, .php">
        <textarea id="txtElm"></textarea>
</div>

<script>
sFile.onchange = function() {
        var reader = new FileReader();
        reader.readAsText(this.files);
        reader.onload = function() {
                txtElm.value = this.result;
        };
};
</script>

马黑黑 发表于 2024-1-21 09:09

代码说明：

01~17行：简简单单的 CSS + HTML 布局代码，无需解释吧；

19~26行：sFile 是选择文件按钮的id，一切在它的 onchange 事件中完成。onchange 事件使用一个函数来实现所需功能，具体代码是 21~25行，一一解释如下——

21行：创建一个 FileReader() 对象 reader，FileReade() 是 JS用于读取文件的内置封装，它提供的 result 就是文件的内容（在后面使用）；

22行：把 选择文件 按钮提交的第一个文件交给 reader 对象解决。FileReader() 对象的方法之一是文本文件的内容，this 这里指向 sFile 即 选择文件 按钮id。

23~25行：reader 对象加载文档完结后，把 this.result 即加载到的文本内容赋值给 txtELm 文本框，this 这里指向 reader.onload 。

程序没有做出错处理，仅是为了代码简洁、易懂，道理上应做出错的预处理。

樵歌 发表于 2024-1-21 12:01

{:4_203:}木看明白，怎样弄

马黑黑 发表于 2024-1-21 12:01

樵歌 发表于 2024-1-21 12:01
木看明白，怎样弄

你电脑里要有记事本编写的 .txt 文件，然后点击“选择文件”按钮，找一个文件就成

樵歌 发表于 2024-1-21 12:04

点了下“选择文件”就出现了自己电脑的许多文件，如果比如选 了一首歌，要把歌的代码加在19行到26行里吗{:4_169:}你知道的，我是呆子我不懂

红影 发表于 2024-1-21 12:35

这个太神奇了，还能直接读取本地的文本啊。
黑黑总是带来很多令人惊奇的东东呢{:4_199:}

红影 发表于 2024-1-21 12:37

樵歌 发表于 2024-1-21 12:04
点了下“选择文件”就出现了自己电脑的许多文件，如果比如选 了一首歌，要把歌的代码加在19行到26行里吗{:4 ...

不是啊，只要选择其中一个文本文件，点打开，就显示在那个框里了啊。师兄试试{:4_173:}

小辣椒 发表于 2024-1-21 12:54

自己测试了一下，才晓得还可以这样测试自己的代码，感觉有点神奇

马黑黑 发表于 2024-1-21 13:15

樵歌 发表于 2024-1-21 12:04
点了下“选择文件”就出现了自己电脑的许多文件，如果比如选 了一首歌，要把歌的代码加在19行到26行里吗{:4 ...

这个仅支持打开文本文件，点”选择文件“ → ”打开“ 之后，一楼的文本框会打开你的文件

马黑黑 发表于 2024-1-21 13:16

红影 发表于 2024-1-21 12:35
这个太神奇了，还能直接读取本地的文本啊。
黑黑总是带来很多令人惊奇的东东呢

不是直接，JS强调安全问题，是用户指定文件后才能打开

马黑黑 发表于 2024-1-21 13:18

小辣椒 发表于 2024-1-21 12:54
自己测试了一下，才晓得还可以这样测试自己的代码，感觉有点神奇

这个不是为了测试代码，发这个，主要想通过代码分析，让大家懂得JS的工作原理——如果可以的话

樵歌 发表于 2024-1-21 14:21

马黑黑 发表于 2024-1-21 12:01
你电脑里要有记事本编写的 .txt 文件，然后点击“选择文件”按钮，找一个文件就成

WD文件不行呀。非要记事本文件，我现在写东西都在记事本里了，可以前的是不是转到记事本上，再记事本上选 ？{:4_203:}

樵歌 发表于 2024-1-21 14:22

马黑黑 发表于 2024-1-21 13:15
这个仅支持打开文本文件，点”选择文件“ → ”打开“ 之后，一楼的文本框会打开你的文件

还是记事本文件才行么{:4_169:}

樵歌 发表于 2024-1-21 14:23

红影 发表于 2024-1-21 12:37
不是啊，只要选择其中一个文本文件，点打开，就显示在那个框里了啊。师兄试试

我选我电脑里下载的歌，可不支持呢。

马黑黑 发表于 2024-1-21 15:11

樵歌 发表于 2024-1-21 14:22
还是记事本文件才行么

文本文件记事本可以处理

马黑黑 发表于 2024-1-21 15:12

樵歌 发表于 2024-1-21 14:21
WD文件不行呀。非要记事本文件，我现在写东西都在记事本里了，可以前的是不是转到记事本上，再记事本上选 ...

Word是富文本，后缀名 .doc 或 .dodx，记事本保存的默认文档是 .txt，纯文本

红影 发表于 2024-1-21 21:11

马黑黑 发表于 2024-1-21 13:16
不是直接，JS强调安全问题，是用户指定文件后才能打开

嗯嗯，这个也很细致的考虑。

红影 发表于 2024-1-21 21:15

樵歌 发表于 2024-1-21 14:23
我选我电脑里下载的歌，可不支持呢。

都说了要记事本文件的啊{:4_173:}

马黑黑 发表于 2024-1-21 21:25

红影 发表于 2024-1-21 21:11
嗯嗯，这个也很细致的考虑。

这是一向的风格

查看完整版本: JS : 打开本地文本文件演示