需要从启用了多个选择的html文件输入中删除特定文件

时间:2015-11-19 06:11:24

标签: javascript jquery html file input

我有一个文件输入字段,我可以一次选择多个文件,并在具有特定文件删除功能的列表中显示所有选定的文件。现在我可以从列表中删除该文件,但我也找不到从输入字段数组中删除该文件的方法。如何使用jQuery从输入字段数组中删除特定文件。 我不想使用任何插件。



$('#uploadBtn').change(function(){
  $('#attachments').html('');
  var attachments = document.getElementById('uploadBtn');
  var item = '';
  for(var i=0; i<attachments.files.length; i++) {
    item += '<li>' + attachments.files.item(i).name +
      '&nbsp;&nbsp;<a href="#" id="'+ i +'" class="dlt-attch">Remove</a>' +
      '</li>';
    console.log(attachments.files.item(i).name);
  }
  $('#attachments').append(item);
  $('.dlt-attch').click(function(e){
    e.preventDefault();
    var id = $(this).attr('id');
    console.log(attachments.files);
    $(this).parent().remove();
  });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="uploadBtn" multiple="multiple" type="file" name="attachments[]" class="upload" />
<ul id="attachments" style="margin-top: 10px; list-style-type: decimal;"></ul>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

很遗憾,您无法从该列表中删除文件,因为它们存储在只读FileList对象中:https://developer.mozilla.org/en-US/docs/Web/API/FileList

作为替代方案,您可以保留自己的文件数组,但之后您需要使用自己的实现来上传文件。

几年前有一个类似的问题,但它仍然有效: How do I remove a file from the FileList - 有一个答案使用XMLHttpRequest手动上传文件。