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

马黑黑

马黑黑

一楼完整代码

1. <style>
   
2. .ma {
   
3.         width: 100%;
   
4.         display: flex;
   
5.         flex-direction: column;
   
6.         gap: 10px;
   
7. }
   
8. .ma > textarea {
   
9.         width: 600px;
   
10.         height: 300px;
    
11. }
    
12. </style>
    
13. 
    
14. <div class="ma">
    
15.         <input type="file" id="sFile" accept=".txt, .bat, .php">
    
16.         <textarea id="txtElm"></textarea>
    
17. </div>
    
18. 
    
19. <script>
    
20. sFile.onchange = function() {
    
21.         var reader = new FileReader();
    
22.         reader.readAsText(this.files[0]);
    
23.         reader.onload = function() {
    
24.                 txtElm.value = this.result;
    
25.         };
    
26. };
    
27. </script>

复制代码

马黑黑

代码说明：

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
木看明白，怎样弄

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

樵歌

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

红影

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

红影

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

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

小辣椒

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

马黑黑

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

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

马黑黑

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

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

马黑黑

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

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

樵歌

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

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

樵歌

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

还是记事本文件才行么

樵歌

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

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

马黑黑

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

文本文件记事本可以处理

马黑黑

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

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

红影

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

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

红影

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

都说了要记事本文件的啊

马黑黑

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

这是一向的风格