这是一个创建于 1606 天前的主题，其中的信息可能已经有所发展或是发生改变。
对前端的内容不是很了解，不知道单纯通过前端能否实现以下内容: 点击浏览器内的元素，能显示本地的文件内容，比如点击 ul 标签，显示本地的 txt 文件内容
我目前找到的资料是：
https://jsbin.com/koxuhuduro/edit?html,js,output
是可以做到点击打开文件按钮来显示本地文件内容，但能否不需要通过按钮，单纯点击 html 中的元素就能显示文件内容？
第 1 条附言 · 2020-06-17 21:00:59 +08:00
确实是想绕过点击按钮这一步，看来是个安全问题，纯前端是做不到了
 |
1
RingoTC 2020-06-17 17:43:24 +08:00  1
你如果静默地读取用户本地文件地内容，而不让用户通过弹窗的方式知晓然后选择要读取的文件。
那用户的信息安全就得不到保障。 |
 |
2
musi 2020-06-17 17:46:36 +08:00
那么问题来了，按钮不是 html 中的元素？
|
 |
3
xiangyuecn 2020-06-17 17:48:48 +08:00 1
能，但本质还是点击打开文件
点击任意元素，js 中手动触发 一个隐藏的 file input click()，打开浏览器的文件选择，选择文件后，把文件读出来 |
 |
4
miniwade514 2020-06-17 17:54:16 +08:00 1
我猜楼主是想绕过选文件这一步？纯前端做不到。
|
 |
5
qiayue 2020-06-17 17:58:35 +08:00
《小 tips: 纯前端 JS 读取与解析本地文本类文件》
https://www.zhangxinxu.com/wordpress/2018/03/js-parse-text-file/ |
 |
6
renmu123 2020-06-17 18:02:45 +08:00 via Android 1
安全性考虑，不允许这样的操作
|
 |
7
faceRollingKB 2020-06-17 18:14:55 +08:00
分几个步骤：
1 、点击 html 元素，触发 input[file]标签的 click 事件，启动浏览器上传文件功能 2 、input(onchange)事件中获取用户上传的文件流 3 、使用特定的编码将文件流转化为字符串进行解析 |
 |
8
crclz 2020-06-17 23:34:32 +08:00
出于安全考虑，纯前端读取文件只能经过 input 来让用户主动选择。并且 chrome 不会给前端提供文件路径，而是提供一个假的路径，例如 C:/fakedir/real_filename.txt 。可以去 F12 试一试。
|
 |
9
iMusic 2020-06-18 00:21:17 +08:00
chooseFileSystemEntries 新 API 了解下
|
 |
10
systemcall 2020-06-18 01:14:17 +08:00 via Android
让用户选择整个驱动器试试，不清楚有没有阻碍
|
 |
11
nianyu 2020-06-18 14:52:46 +08:00
可以 但是你得先通过 input file 选中文件。而不是通过点击任意元素就能实现
|
Select Language