如何从 html 输入类型文件多个中删除单个文件？ [复制]

Posted 2023-05-08

【中文标题】如何从 html 输入类型文件多个中删除单个文件？ [复制]

【英文标题】：How to remove single file from html input type file multiple? [duplicate]

【发布时间】：2017-12-10 17:11:26

【问题描述】：

HTML：

<div class="filesdiv">
        <input type="file" name="files" id="files" style="display: none;" multiple 
      required>
        <label for="files" class="btn btn-xs">Upload files</label>
        <div class="filenames"></div>
</div>

JQUERY：

var filelist = [];

$('#files').change(function(event) 
    files = this.files;
    console.log(files);
    filelist.push(files);
    console.log(filelist[0]);
    $('.filenames').empty()
    $.each(files, function(index) 
        $('.filenames').append('<div style="overflow: hidden;">'+this.name+'</div>');
    );
    $('#files').val('')
    console.log(this.files)
    console.log(filelist[0])
);

我的控制台输出：

我的基本需求是从多个输入中删除单个文件。我已经阅读了一些 *** 答案和博客，文件位于 FileList 对象中，并且是只读的。因此，我正在尝试制作本地副本并尝试对其进行操作。一旦 FileList 对象被删除，数组文件列表也会被删除。

【问题讨论】：

您确定要删除文件吗？为什么不在处理文件时跳过它？

你的意思是在服务器端跳过它？

谢谢，我可以跳过服务器端的文件。但我想知道为什么不能复制 FileList 对象？

这不是你问的。也许您应该编辑问题以询问那个，而不是“如何”。此外，这实际上是一个重复的问题。请参阅评论中链接的答案。

【参考方案1】：

您可能希望使用 lib 来让生活更轻松。

像uploadify这样的东西：http://www.uploadify.com/documentation/uploadifive/implementing-uploadifive/