时间戳

首页 > 解决方案 > 如何从输入多个文件中删除 1 个文件

javascript - 如何从输入多个文件中删除 1 个文件

问题描述

我有输入

<input id="0_input_id" 
onchange="input_change(0)" 
name="files[]" 
type="file" 
required multiple 
class="drop_zone_input">

并具有删除功能

function delete_file(file_count, i, input_count)
{
    const input = document.getElementById("0_input_id");
    input.files[i] = undefined;
}

但是这个文件没有删除，我不能使用 input.value = null 因为它清除了所有输入，有助于删除 1 个文件。

标签： javascripthtml

解决方案

HTML<input type="file">的files属性必须是类型的对象FileList。您不能修改 a FileList，因此要删除一个项目，您需要将其转换为数组，删除该项目，然后将其转换为新的FileList。

如何从文件列表中删除文件
https://stackoverflow.com/a/47522812/15584743
https://stackoverflow.com/a/52079109/15584743

const input = document.querySelector('input');

input.addEventListener('change', function(e)
{
  console.log('Files:', this.files);
  
  this.files = delete_file(this.files, 0);
  
  console.log('Files:', this.files);
});

function delete_file(filelist, i)
{
  let arr = new Array(...filelist);
  
  arr.splice(i, 1);
  
  return array_to_filelist(arr);
}

function array_to_filelist (arr)
{
  let b = new ClipboardEvent('').clipboardData || new DataTransfer();
  
  for (let i = 0, len = arr.length; i < len; i++)
  {
    b.items.add(arr[i]);
  }
  
  return b.files;
}
<input type="file" multiple>

推荐阅读