前端中能否点击元素显示本地文件内容？

[seasona]

对前端的内容不是很了解，不知道单纯通过前端能否实现以下内容: 点击浏览器内的元素，能显示本地的文件内容，比如点击 ul 标签，显示本地的 txt 文件内容

我目前找到的资料是：

https://jsbin.com/koxuhuduro/edit?html,js,output

是可以做到点击打开文件按钮来显示本地文件内容，但能否不需要通过按钮，单纯点击 html 中的元素就能显示文件内容？

[RingoTC]

你如果静默地读取用户本地文件地内容，而不让用户通过弹窗的方式知晓然后选择要读取的文件。
那用户的信息安全就得不到保障。

[musi]

那么问题来了，按钮不是 html 中的元素？

[xiangyuecn]

能，但本质还是点击打开文件

点击任意元素，js 中手动触发 一个隐藏的 file input click()，打开浏览器的文件选择，选择文件后，把文件读出来

[miniwade514]

我猜楼主是想绕过选文件这一步？纯前端做不到。

[qiayue]

《小 tips: 纯前端 JS 读取与解析本地文本类文件》
https://www.zhangxinxu.com/wordpress/2018/03/js-parse-text-file/

[renmu123]

安全性考虑，不允许这样的操作

[faceRollingKB]

分几个步骤：
1 、点击 html 元素，触发 input[file]标签的 click 事件，启动浏览器上传文件功能
2 、input(onchange)事件中获取用户上传的文件流
3 、使用特定的编码将文件流转化为字符串进行解析

[crclz]

出于安全考虑，纯前端读取文件只能经过 input 来让用户主动选择。并且 chrome 不会给前端提供文件路径，而是提供一个假的路径，例如 C:/fakedir/real_filename.txt 。可以去 F12 试一试。

[iMusic]

chooseFileSystemEntries 新 API 了解下

[systemcall]

让用户选择整个驱动器试试，不清楚有没有阻碍

[nianyu]

可以 但是你得先通过 input file 选中文件。而不是通过点击任意元素就能实现