如何在Angular 2中使用输入标记文件类型重置所选文件？

Question

这是我的输入标签的样子:

<input type="file" placeholder="File Name" name="filename" (change)="onChange($event)">
<button>Reset</button>

我想在Angular 2中重置所选文件.非常感谢帮助.如果您需要更多详细信息,请告诉我们.

PS

我可以从$event参数中获取文件详细信息并将其保存在typescript变量中,但此变量未绑定到输入标记.

Answer 1

您可以使用它ViewChild来访问组件中的输入.首先,您需要添加#someValue到输入中,以便在组件中读取它:

<input #myInput type="file" placeholder="File Name" name="filename" (change)="onChange($event)">

然后在您的组件中,您需要ViewChild从@angular/core以下位置导入:

import { ViewChild } from '@angular/core';

然后你ViewChild用来访问模板的输入:

@ViewChild('myInput')
myInputVariable: ElementRef;

现在您可以使用myInputVariable重置所选文件,因为它是对输入的引用#myInput,例如reset()将在click按钮事件时调用的create方法:

reset() {
    console.log(this.myInputVariable.nativeElement.files);
    this.myInputVariable.nativeElement.value = "";
    console.log(this.myInputVariable.nativeElement.files);
}

首先console.log将打印您选择的文件,第二个console.log将打印一个空数组,因为this.myInputVariable.nativeElement.value = "";从输入中删除了选定的文件.我们必须使用this.myInputVariable.nativeElement.value = "";重置输入的值,因为输入的FileList属性是只读的,所以不可能只从数组中删除项目.这是工作的Plunker.

Answer 2

我通常在捕获所选文件后重置我的文件输入。无需按下按钮，您拥有$event要传递给的对象所需的一切onChange：

onChange(event) {
  // Get your files
  const files: FileList = event.target.files;

  // Clear the input
  event.target.value = null;
}

不同的工作流程，但 OP 没有提到按下按钮是一项要求。

* 2021 年 6 月 14日更新以替换event.srcElement为event.target，现在srcElement已弃用

Answer 3

实现它的一种方法是将输入包装在<form>标签中并重置它.

我不考虑THR形式连接到NgForm或FormControl两种.

@Component({
  selector: 'form-component',
  template: `
    <form #form>
      <input type="file" placeholder="File Name" name="filename">
    </form>
    <button (click)="reset()">Reset</button>
`
})
class FormComponent {



  @ViewChild('form') form;


  reset() {
    this.form.nativeElement.reset()
  }
}

https://plnkr.co/edit/Ulqh2l093LV6GlQWKkUA?p=preview

Answer 4

Angular 5

HTML

<input type="file" #inputFile>

<button (click)="reset()">Reset</button>

模板

@ViewChild('inputFile') myInputVariable: ElementRef;

reset() {
    this.myInputVariable.nativeElement.value = '';
}

按钮不是必需的.您可以在更改事件后重置它,它仅用于演示