对前端的内容不是很了解，不知道单纯通过前端能否实现以下内容: 点击浏览器内的元素，能显示本地的文件内容，比如点击 ul 标签，显示本地的 txt 文件内容
我目前找到的资料是：
https://jsbin.com/koxuhuduro/edit?html,js,output
是可以做到点击打开文件按钮来显示本地文件内容，但能否不需要通过按钮，单纯点击 html 中的元素就能显示文件内容？
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
This topic created in 2331 days ago, the information mentioned may be changed or developed.
Supplement 1 · Jun 17, 2020
确实是想绕过点击按钮这一步，看来是个安全问题，纯前端是做不到了
 |
1
你如果静默地读取用户本地文件地内容，而不让用户通过弹窗的方式知晓然后选择要读取的文件。
那用户的信息安全就得不到保障。 |
1 |
musiJun 17, 2020
2
那么问题来了，按钮不是 html 中的元素？
|
 |
3
能，但本质还是点击打开文件
点击任意元素，js 中手动触发 一个隐藏的 file input click()，打开浏览器的文件选择，选择文件后，把文件读出来 |
 |
4
我猜楼主是想绕过选文件这一步？纯前端做不到。
|
 |
qiayueJun 17, 2020
5
《小 tips: 纯前端 JS 读取与解析本地文本类文件》
https://www.zhangxinxu.com/wordpress/2018/03/js-parse-text-file/ |
 |
6
安全性考虑，不允许这样的操作
|
 |
faceRollingKBJun 17, 2020
7
分几个步骤：
1 、点击 html 元素，触发 input[file]标签的 click 事件，启动浏览器上传文件功能 2 、input(onchange)事件中获取用户上传的文件流 3 、使用特定的编码将文件流转化为字符串进行解析 |
 |
crclzJun 17, 2020
8
出于安全考虑，纯前端读取文件只能经过 input 来让用户主动选择。并且 chrome 不会给前端提供文件路径，而是提供一个假的路径，例如 C:/fakedir/real_filename.txt 。可以去 F12 试一试。
|
 |
MzM2ODkxJun 18, 2020
9
chooseFileSystemEntries 新 API 了解下
|
 |
systemcallJun 18, 2020 via Android
10
让用户选择整个驱动器试试，不清楚有没有阻碍
|
 |
nianyuJun 18, 2020
11
可以 但是你得先通过 input file 选中文件。而不是通过点击任意元素就能实现
|
Select Language