V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
mostkia
V2EX  ›  问与答

请教懂 js 代码的朋友一个问题, file 控件内容,如何用 js 来实时修改?

  •  
  •   mostkia · 2020-01-29 22:20:22 +08:00 · 1580 次点击
    这是一个创建于 1793 天前的主题,其中的信息可能已经有所发展或是发生改变。

    首先说明一下:
    js 不会请求没有上传的文件名称,所以权限应该不会有问题。

    遇到的问题:
    因为客户需求,有多次选一个或多个文件,满意后点击上传到服务器的需求。所以对应的 FileList 是不断变化的,只有客户点击了“上传”按钮后 FileList 列表内的内容才能算数上传服务器。所以就产生了这个需求,因为 js 代码需要不断根据选择框内已有的内容(客户可能上传的内容不满意又删了的),不断修改 input 上传控件内的信息。但我发现 files 对象似乎是锁定的,key 也是数字类型的,似乎没法修改。具体是我的方法错了吗?

    如下图:

    不过类似 test3.files = test1.files 这种方法又的确额可以生效,说明该属性不是只读的,不知道为什么会这样,期待有懂这方面得朋友解答一下,是否有什么解决方案

    6 条回复    2020-01-30 20:20:02 +08:00
    ragnaroks
        1
    ragnaroks  
       2020-01-30 01:51:11 +08:00
    只需要一个 input,当用户选择文件后,直接在 onload 把文件读到内存
    const filesArray=[];
    input.onload=function(){ filesArray.push(file); }
    用户删除的时候遍历并 slice 即可
    ragnaroks
        2
    ragnaroks  
       2020-01-30 01:52:09 +08:00
    你可以参考下各种图床,可以选择很多文件,点了上传才真正上传,没上传之前可以删除,这差不多刚好和你的需求一致
    mostkia
        3
    mostkia  
    OP
       2020-01-30 10:06:13 +08:00
    @ragnaroks 好的,谢谢。昨晚查资料查了很久,发现 FileList 列表的确是只读的,只能清空,不能修改。可能是考虑安全性的原因,所以,目前来看,只能自己创建一个文件列表了。通过 formData 方式上传。只不过这样兼容性可能会有影响,而且这样写出来的文件上传组件,无法作为其他表单的一个子功能调用( formData 只能储存在内存里,没法重新写回 input 里,单纯通过 submit 提交)我个人目前更偏向于使用 base64 方法,将需要的文件名、类型、大小之类的信息,和 base64 内容组成 json,实时存入 input 内回传回服务器。只是这种方法无法处理非常大的文件,比如一个 200mb 的文件,编码的时间将会非常的久。但因为是字符串类型的,处理非常方便所以通用性来讲的确更可靠一些。
    Sendya
        4
    Sendya  
       2020-01-30 10:22:26 +08:00 via Android
    题主打算兼容 IE8 吗?
    mostkia
        5
    mostkia  
    OP
       2020-01-30 11:20:27 +08:00
    @Sendya 主要是需要能兼容单独使用( ajax )和集成在其他表单中做子功能使用的场景,formData 方式没法反向写入到 input,纯表单模式下使用受限。至于兼容性,目前没考虑太多,能做到兼容自然最好,做不到也没事,一般 IE9 ( win7 系统)都快淘汰了。
    w292614191
        6
    w292614191  
       2020-01-30 20:20:02 +08:00 via iPhone
    看起来,你需要一个文件上传插件。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1087 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 19:01 · PVG 03:01 · LAX 11:01 · JFK 14:01
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.