如何通过角度4中的功能删除输入类型=“文件”时的选定文件名？

Question

我是Angular的新手。我正在使用以下代码从文件夹附加文件，

   <input #fileInput type="file"  />
<button type="button" (click)="fileInput.click()">trigger</button>

选择特定文件后，UI看起来像附件的图像

现在，当单击某些按钮

时，我正尝试使用“选择文件”按钮删除带有默认文本“未选择文件”的所选文件名，如图所示

有人可以建议我实现这一目标吗？预先感谢。

Answer 1

只需将该元素的值重置为空。如下所示-

<input #fileInput type="file"  />
<button type="button" (click)="fileInput.click()">trigger</button>
<button type="button" (click)="reset(fileInput)">Reset</button>

reset(element) {
    element.value = "";
}

Working Example

Answer 2

实际上没有棱角。可以有角度也可以没有角度。

使用Angular

<input #fileInput type="file"  />
<button type="button" (click)="fileInput.click()">trigger</button>
<button type="button" (click)="fileInput.value=''">Reset</button>

使用JQuery

$('#fileId').value=''

使用Pure JS

document.GetElementById('elementId').value = '';

Answer 3

您可以为此使用ViewChild。

在您的.ts中，这样声明viewchild =>

@ViewChild('fileInput')
  myVar1: any;

内部重置方法，您可以这样做=>

this.myVar1.nativeElement.value = '';