有许多方法，我将建议去参考附件输入。

<input
    id="image"
    type="file"
    required
    ref={ref => this.fileInput = ref}
    multiple
    onChange={this.onFileChangeHandler}
/>

在提交后清除值。

this.fileInput.value = "";

使用angular，你可以创建一个模板变量，并将其值设置为null

<input type="file" #fileUploader />
<button (click)="fileUploader.value = null">Reset from UI</button>

或者你可以像这样创建一个方法来重置

component.ts

  @ViewChild('fileUploader') fileUploader:ElementRef;

  resetFileUploader() { 
    this.fileUploader.nativeElement.value = null;
  }

模板

<input type="file"/>
<button (click)="resetFileUploader()">Reset from Component</button>

stackblitz试样

也适用于动态控制。

Javascript

<input type="file" onchange="FileValidate(this)" />

function FileValidate(object) {
    if ((object.files[0].size / 1024 / 1024) > 1) {   //greater than 1 MB         
        $(object).val('');
    }     
}

JQuery

<input type="file" class="UpoloadFileSize">

$(document).ready(function () {

    $('.UpoloadFileSize').bind('change', function () {                
        if ((this.files[0].size / 1024000) > 1.5) { //greater than 1.5 MB
            $(this).val('');
            alert('Size exceeded !!');
        }
    });

});

特别是对于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 " >包装成<form>标签，然后你可以通过重置你的表单来重置输入:

onClick="this.form.reset()"

你不能重置，因为它是一个只读文件。你可以克隆它来解决这个问题。