如何重置选定的文件与输入标记文件类型在角度2？

下面是我的输入标签的样子:

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

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

P.S.

我可以从 $event参数中获得文件详细信息，并将其保存在一个类型脚本变量中，但是这个变量不绑定到 input 标记。

148120 次浏览
小开

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

I'm not considering attaching thr form to NgForm or FormControl either.

@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

小开
最佳答案

可以使用 ViewChild访问组件中的输入。首先，您需要将 #someValue添加到您的输入，这样您就可以在组件中读取它:

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

然后，在组件中，需要从 @angular/core导入 ViewChild:

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

然后使用 ViewChild访问模板中的输入:

@ViewChild('myInput')
myInputVariable: ElementRef;

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

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。

小开

简短版 笨蛋:

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


@Component({
selector: 'my-app',
template: `
<input #myInput type="file" placeholder="File Name" name="filename">
<button (click)="myInput.value = ''">Reset</button>
`
})
export class AppComponent {




}

我认为更常见的情况是不使用按钮，但做自动复位。角 模板语句支持链式表达式，因此 笨蛋:

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


@Component({
selector: 'my-app',
template: `
<input #myInput type="file" (change)="onChange(myInput.value, $event); myInput.value = ''" placeholder="File Name" name="filename">
`
})
export class AppComponent {


onChange(files, event) {
alert( files );
alert( event.target.files[0].name );
}


}

和 有趣的链接关于为什么在值变化时没有递归。

小开

I think its simple, use #variable

<input #variable type="file" placeholder="File Name" name="filename" (change)="onChange($event); variable.value='' ">
<button>Reset</button>

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

小开

角度5

Html

<input type="file" #inputFile>


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

模板

@ViewChild('inputFile') myInputVariable: ElementRef;


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

Button is not required. You can reset it after change event, it is just for demonstration

小开

我通常在捕获所选文件之后重置文件输入。不需要按一个按钮，你已经拥有了传递给 onChange的 $event对象所需要的一切:

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


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

不同的工作流程，但是 OP 没有提到按下按钮是必需的。

* 更新了6/14/2021，以 event.target取代 event.srcElement，因为 srcElement已被弃用

小开

If you are facing issue with ng2-file-upload,

HTML:

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

组件

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';


@ViewChild('`**activeFrameinputFile**`') `**InputFrameVariable**`: ElementRef;


this.frameUploader.onSuccessItem = (item, response, status, headers) => {
this.`**InputFrameVariable**`.nativeElement.value = '';
};
小开

模板:

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

组成部分:

fileChange(event) {
alert(this.torrentFileValue);
this.torrentFileValue = '';
}
}
小开 
<input type="file" id="image_control" (change)="validateFile($event)" accept="image/gif, image/jpeg, image/png" />

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'] = "";
}
}
}

在控制台中打印 document.forms，您可以得到想法. 。

小开

您可以使用模板引用变量并发送到一个方法

Html

<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>

我在 HTML 中使用 # fileInput 重置它，而不是在 Component. ts 中创建 ViewChild。 每当单击“ Upload File”按钮时，它首先重置 # fileInput，然后触发 #fileInput.click()函数。 如果任何单独的按钮需要重置，然后单击 #fileInput.value=''可以执行。

小开

我用的是一种非常简单的方法。上传文件后，我很快使用 * ngIf 删除输入控件。这将导致输入字段从域中删除并重新添加，因此它是一个新的控件，因此它是空的:

showUploader: boolean = true;


async upload($event) {
await dosomethingwiththefile();
this.showUploader = false;
setTimeout(() =>{ this.showUploader = true }, 100);
}
<input type="file" (change)="upload($event)" *ngIf="showUploader">


提交答案