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

这是我的输入标记的外观：

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

重置

我想在Angular 2中重置所选文件。非常感谢您的帮助。如果你需要更多的细节，请告诉我

附言

---

我可以从

$event

参数中获取文件详细信息，并将其保存在一个typescript变量中，但此变量未绑定到输入标记。

实现此目的的一种方法是将您的输入包装在

标记中并重置它

我也没有考虑将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()
  }
}

@组件({
选择器：“表单组件”，
模板：`
重置
`
})
类FormComponent{
@ViewChild（“表单”）表单；
重置（）{
this.form.nativeElement.reset（）
}
}

---

您可以使用

ViewChild

访问组件中的输入。首先，您需要向输入中添加

#someValue

，以便在组件中读取：

fileChange(event) {
        alert(this.torrentFileValue);
        this.torrentFileValue = '';
    }
}

然后在组件中，您需要从

@angular/core

导入

ViewChild

：

从'@angular/core'导入{ViewChild}；

然后使用

ViewChild

从模板访问输入：

@ViewChild（'myInput'）
myInputVariable:ElementRef；

现在，您可以使用

myInputVariable

重置所选文件，因为它是对使用

#myInput

进行输入的引用，例如创建方法

reset（）

，该方法将在

单击按钮的事件时调用：

reset（）{
log（this.myInputVariable.nativeElement.files）；
this.myInputVariable.nativeElement.value=“”；
log（this.myInputVariable.nativeElement.files）；
}

第一个
console.log
将打印您选择的文件，第二个
console.log
将打印空数组，因为
this.myInputVariable.nativeElement.value=“”从输入中删除选定的文件。我们必须使用
this.myInputVariable.nativeElement.value=“”
重置输入的值，因为输入的
文件列表
属性为只读，所以无法从数组中删除项。现在开始工作。
简短版本：

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
模板：`
重置
`
})
导出类AppComponent{
}

我认为更常见的情况是不使用按钮，而是自动重置。角度支撑链接表达式，因此：

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
模板：`
`
})
导出类AppComponent{
onChange（文件、事件）{
警报（文件）；
警报（event.target.files[0].name）；
}
}

关于为什么在值变化上没有递归。
我认为它很简单，使用变量


重置

“variable.value=null”选项也可用

html

<input type="file" #inputFile>

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

按钮不是必需的。您可以在更改事件后重置它，这只是为了演示
我通常在捕获所选文件后重置文件输入。无需按下按钮，您将在传递给
onChange
的
$event
对象中拥有所需的一切：

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

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

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

*更新于2021年6月14日，将
event.srcement
替换为
event.target
，现在
srcement
已被弃用
如果您面临ng2文件上载问题，

HTML:

<input type="file" name="myfile" ` **#activeFrameinputFile** `ng2FileSelect [uploader]="frameUploader" (change)="frameUploader.uploadAll()" />

模板：

<input [(ngModel)]="componentField" type="file" (change)="fileChange($event)" placeholder="Upload file">



我已将此输入标记添加到表单标记中

 <form id="form_data">
  <input  type="file" id="file_data"  name="browse"
  (change)="handleFileInput($event, dataFile, f)"  />
</form>



我在下面添加了一行代码，在文档表单中获取表单id，并将该值设为null

    for(let i=0; i<document.forms.length;i++){
      if(document.forms[i].length > 0){
             if(document.forms[i][0]['value']){ //document.forms[i][0] = "file_data"
                 document.forms[i][0]['value'] = "";
              }
      }
    }

for（设i=0；i=0）{
如果（document.forms[i][0][value']）{//document.forms[i][0]=“文件数据”
表格[i][0][value']=''；
}
}
}

在控制台中打印document.forms，您就可以了解了。
您可以使用模板引用变量并发送到方法

html

就我而言，我的做法如下：

 <input #fileInput hidden (change)="uploadFile($event.target.files)" type="file" />
 <button mat-button color="warn" (click)="fileInput.value=''; fileInput.click()"> Upload File</button>



上载文件

我正在使用HTML中的#fileInput重置它，而不是在component.ts中创建ViewChild。
每当单击“上载文件”按钮时，它首先重置#fileInput，然后触发
#fileInput.click（）
函数。
如果需要重置任何单独的按钮，请单击
#fileInput.value='
。
我使用的是一个非常简单的方法。上传文件后，我很快使用*ngIf删除输入控件。这将导致输入字段从dom中删除并重新添加，因此它是一个新控件，因此是emply：


showUploader:boolean=true；
异步上载（$event）{
等待DoSomethingWith文件（）；
this.showUploader=false；
setTimeout（（）=>{this.showUploader=true}，100）；
}
当你说重置时，你的确切意思是什么。您能创建一个帖子并发布您面临的问题吗？我们能在viewChild上使用
.reset（）
方法吗？您好，Edmar。。。你能帮我解答这个链接上的问题吗…这是否足以清除value
this.myInputVariable.nativeElement.value=“”
？/@PardeepJain是的，如果您正在查找的是文件输入，那么这会从文件输入中清除所选文件。
myInputVariable
确实是类型
ElementRef
如果我有一个变量“input type=file”，那么ID会动态生成吗？在angular 8@ViewChild（'delDocModal'，{static:false}）delDocModal:ElementRef；我使用了这个版本，它对我来说很好-谢谢@Admircan你可以提供一个简短的代码描述来解释它是如何工作的吗？根据MDN，它的支持很差。参考检查
<input [(ngModel)]="componentField" type="file" (change)="fileChange($event)" placeholder="Upload file">

fileChange(event) {
        alert(this.torrentFileValue);
        this.torrentFileValue = '';
    }
}

validateFile(event: any): void {
    const self = this;
    if (event.target.files.length === 1) {
      event.srcElement.value = null;
    }
  }

 <form id="form_data">
  <input  type="file" id="file_data"  name="browse"
  (change)="handleFileInput($event, dataFile, f)"  />
</form>

    for(let i=0; i<document.forms.length;i++){
      if(document.forms[i].length > 0){
             if(document.forms[i][0]['value']){ //document.forms[i][0] = "file_data"
                 document.forms[i][0]['value'] = "";
              }
      }
    }

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

onChange(event: any, element): void {
    // codes
    element.value = '';
  }

 <input #fileInput hidden (change)="uploadFile($event.target.files)" type="file" />
 <button mat-button color="warn" (click)="fileInput.value=''; fileInput.click()"> Upload File</button>