JavaScript 从要上传的 FileList 中删除文件

Question

有代码https://jsfiddle.net/bfzmm1hc/1一切看起来都很好，但我想从集合中删除一些文件。

我已经找到了这些:

• How to remove one specific selected file from input file control
• input type=file multiple, delete items

我知道 FileList 对象是只读的，所以我可以将文件复制到一个新数组中。但是我应该如何处理这个新的 File 对象数组呢？我无法将它分配给 files 属性...

Answer 1

我找到了解决方法。这根本不需要 AJAX 请求，表单可以发送到服务器。基本上，您可以创建一个 hidden 或 text 输入，并将其 value 属性设置为在处理所选文件后创建的 base64 字符串。

<input type=hidden value=${base64string} />

您可能会考虑创建多个输入文件而不是输入 text 或 hidden。这将不起作用，因为我们无法为其分配值。

此方法会将输入文件包含在发送到数据库的数据中并忽略输入文件，您可以:

• 后端不考虑字段；
• 您可以在序列化表单之前为输入文件设置disabled属性；
• 在发送数据之前删除 DOM 元素。

当你想删除一个文件时，只需获取元素的索引并从 DOM 中删除输入元素(文本或隐藏)。

要求:

• 您需要编写逻辑来转换 base64 文件，并在输入文件触发 change 事件时将所有文件存储在一个数组中。

优点:

• 这基本上会给您很多控制权，您可以过滤、比较文件、检查文件大小、MIME 类型等等。