javascript - 如何从 html 文件输入类型中删除单个文件？

Question

我的任务是向"file"类型的 html 输入添加删除功能，它可以从多个文件的列表中删除单个文件。正如您在下面的代码片段中看到的，一次删除所有文件很容易，但我删除某个索引处的一个文件的功能不起作用。

function remove(i){
  document.getElementById('files').files.splice(i, 1);
}

function removeAll(){
  document.getElementById("files").value=null;
}

<input id="files" type="file" multiple="multiple">


<button onclick="remove(1)">delete 1st</button>
<button onclick="remove(2)">delete 2nd</button>
<button onclick="remove(3)">delete 3rd</button>

<button onclick="removeAll()">delete all</button>

有什么方法可以让这个remove()函数起作用吗？

Answer 1

您需要先将对象从 do​​cument.getElementById('files') 转换为数组。 .splice() 也返回删除的元素。所以你需要将数组存储在一个变量中。在此数组上使用 .splice() 后，数组将包含剩余的元素:

function remove(i){

  var myFiles = Object.entries(document.getElementById('files').files)
  Object.entries(myFiles.splice(i-1, 1)); // make sure to use i-1, not i
  console.log(myFiles);
  // const obj = Object.assign({}, myFiles ); use this to return it back to an obj
}

function removeAll(){
  document.getElementById("files").value=null;
}

<input id="files" type="file" multiple="multiple">


<button onclick="remove(1)">delete 1st</button>
<button onclick="remove(2)">delete 2nd</button>
<button onclick="remove(3)">delete 3rd</button>

<button onclick="removeAll()">delete all</button>