在使用 Javascript 上传之前删除选定的文件答案

【问题标题】：Remove selected file(s) before upload with Javascript在使用 Javascript 上传之前删除选定的文件
【发布时间】：2012-03-09 09:59:12
【问题描述】：

假设我有一个表单，允许用户上传多张图片，如果他们不想上传该特定照片，则附加一个选项以删除它们。

是否可以从他们删除的文件对象中删除值（例如，不想上传）？

【问题讨论】：

您是否尝试删除<input type='file'>？当然，如果您的表单包含一组标准文件输入。
How to remove one specific selected file from input file control的可能重复

标签： javascript jquery image file-upload upload

【解决方案1】：

在我们获得一些标准 API 之前，最好的选择是库...

FineUploader。 Demo。有文件删除、图片预览、文件重命名。
bluimp's jQuery File Upload Plugin。 Demo。具有文件删除、图片预览、单个文件上传、上传撤消功能。

他们也可以通过https://cdnjs.com/获得

【讨论】：

2 年后... FileList 仍然不以任何方式支持删除其 API 中的条目。
@bob_cobb 这是一个悲伤的未来 =)
未来已来，仍在寻找删除文件的正确方法─似乎还没有。

【解决方案2】：

如果您使用带有一组标准文件输入的标准表单，那么您可以这样做http://jsfiddle.net/thXre/

$(document).ready(function(){
    $('.remove').click(function(){
        $(this).closest('div').slideUp('slow', function(){$(this).remove();});
    });        
});

和html代码：

<div>
 <input type='file' name='files[]'> <img src='x.gif' class='remove'>
</div>
<div>
 <input type='file' name='files[]'> <img src='x.gif' class='remove'>
</div>
<div>
 <input type='file' name='files[]'> <img src='x.gif' class='remove'>
</div>

【讨论】：

谢谢，我知道如何删除实际元素，但它会将它们从我感兴趣的上传文件中删除，由 FileList 负责。

【解决方案3】：

FileList 没有用于删除条目的 API：

https://developer.mozilla.org/en/DOM/FileList

但是，您可以使用 XHR2 和 AJAX 重构文件上传器并在那里过滤内容。这意味着要进行 XHR2 和 AJAX 上传，不适合传统的 <form> 上传。

https://developer.mozilla.org/en/Using_files_from_web_applications

【讨论】：