另一种解决方案(不选择HTML DOM元素)

如果你在输入中添加了'change'事件监听器，那么在javascript代码中你可以调用(对于某些特定的条件):

event.target.value = '';

例如在HTML中:

<input type="file" onChange="onChangeFunction(event)">

在javascript中:

onChangeFunction(event) {
  let fileList = event.target.files;
  let file = fileList[0];
  let extension = file.name.match(/(?<=\.)\w+$/g)[0].toLowerCase(); // assuming that this file has any extension

  if (extension === 'jpg') {
    alert('Good file extension!');
  }
  else {
    event.target.value = '';
    alert('Wrong file extension! File input is cleared.');
  }

如果你有以下情况:

<input type="file" id="fileControl">

然后就这样做:

$("#fileControl").val('');

重置文件控件。

特别是对于Angular来说

document.getElementById('uploadFile').value = "";

会工作，但是如果你使用Angular呢 它会说“属性‘value’在类型‘HTMLElement’.any上不存在”

document.getElementById()返回不包含value属性的HTMLElement类型。因此，将它转换为HTMLInputElement

(<HTMLInputElement>document.getElementById('uploadFile')).value = "";

额外的:-

然而，我们不应该在angular中使用DOM操作(document.xyz())。

为此，angular提供了@ViewChild、@ViewChildren等，分别是document.querySelector()、document.queryselectorAll()。

连我都没读过。最好关注专家的博客

通过这个link1和link2

重置输入文件是非常单一的

$（'input[type=file]'）.val（null）;

如果你绑定重置文件中更改表单的其他字段，或者用ajax加载表单。

本例适用

选择器，例如$('input[type=text]')或表单的任何元素

事件单击，更改，或任何事件

$('body').delegate('event', 'selector', function(){
     $('input[type=file]').val(null) ;
});

@dhaval-marthak在评论中发布的jQuery解决方案显然是有效的，但如果你看看实际的jQuery调用，就很容易看出jQuery在做什么，只是将value属性设置为空字符串。所以在“纯”JavaScript中，它将是:

document.getElementById("uploadCaptureInputFile").value = "";

我在这里错过了另一个解决方案(2021年): 我使用FileList与文件输入交互。

因为没有办法创建FileList对象，所以我使用DataTransfer，它带来了干净的FilleList。

我用:

  file_input.files=new DataTransfer().files  

在我的例子中，这非常适合，因为我只通过FileList与封装的文件输入元素进行交互。