V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
seasona
V2EX  ›  程序员

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

  •  
  •   seasona · 2020-06-17 17:38:24 +08:00 · 2110 次点击
    这是一个创建于 1401 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    我目前找到的资料是:

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

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

    第 1 条附言  ·  2020-06-17 21:00:59 +08:00
    确实是想绕过点击按钮这一步,看来是个安全问题,纯前端是做不到了
    11 条回复    2020-06-18 14:52:46 +08:00
    RingoTC
        1
    RingoTC  
       2020-06-17 17:43:24 +08:00   ❤️ 1
    你如果静默地读取用户本地文件地内容,而不让用户通过弹窗的方式知晓然后选择要读取的文件。
    那用户的信息安全就得不到保障。
    musi
        2
    musi  
       2020-06-17 17:46:36 +08:00
    那么问题来了,按钮不是 html 中的元素?
    xiangyuecn
        3
    xiangyuecn  
       2020-06-17 17:48:48 +08:00   ❤️ 1
    能,但本质还是点击打开文件

    点击任意元素,js 中手动触发 一个隐藏的 file input click(),打开浏览器的文件选择,选择文件后,把文件读出来
    miniwade514
        4
    miniwade514  
       2020-06-17 17:54:16 +08:00   ❤️ 1
    我猜楼主是想绕过选文件这一步?纯前端做不到。
    qiayue
        5
    qiayue  
       2020-06-17 17:58:35 +08:00
    《小 tips: 纯前端 JS 读取与解析本地文本类文件》
    https://www.zhangxinxu.com/wordpress/2018/03/js-parse-text-file/
    renmu123
        6
    renmu123  
       2020-06-17 18:02:45 +08:00 via Android   ❤️ 1
    安全性考虑,不允许这样的操作
    faceRollingKB
        7
    faceRollingKB  
       2020-06-17 18:14:55 +08:00
    分几个步骤:
    1 、点击 html 元素,触发 input[file]标签的 click 事件,启动浏览器上传文件功能
    2 、input(onchange)事件中获取用户上传的文件流
    3 、使用特定的编码将文件流转化为字符串进行解析
    crclz
        8
    crclz  
       2020-06-17 23:34:32 +08:00
    出于安全考虑,纯前端读取文件只能经过 input 来让用户主动选择。并且 chrome 不会给前端提供文件路径,而是提供一个假的路径,例如 C:/fakedir/real_filename.txt 。可以去 F12 试一试。
    iMusic
        9
    iMusic  
       2020-06-18 00:21:17 +08:00
    chooseFileSystemEntries 新 API 了解下
    systemcall
        10
    systemcall  
       2020-06-18 01:14:17 +08:00 via Android
    让用户选择整个驱动器试试,不清楚有没有阻碍
    nianyu
        11
    nianyu  
       2020-06-18 14:52:46 +08:00
    可以 但是你得先通过 input file 选中文件。而不是通过点击任意元素就能实现
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   946 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 21:31 · PVG 05:31 · LAX 14:31 · JFK 17:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.