[angular] Angular 2에서 입력 태그 파일 유형으로 선택한 파일을 재설정하는 방법은 무엇입니까?
이것은 내 입력 태그의 모습입니다.
<input type="file" placeholder="File Name" name="filename" (change)="onChange($event)">
<button>Reset</button>
Angular 2에서 선택한 파일을 재설정하고 싶습니다. 도움을 주시면 감사하겠습니다. 더 자세한 정보가 필요하면 알려주세요.
추신
$event매개 변수 에서 파일 세부 사항을 가져 와서 typescript 변수에 저장할 수 있지만이 변수는 입력 태그에 바인딩되지 않습니다.
답변
를 사용 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 버튼 이벤트에서 .
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 = "";input의 FileList속성이 readonly 이기 때문에 input의 값을 재설정하는 데 사용해야 하므로 배열에서 항목을 제거하는 것은 불가능합니다. 여기 Plunker 가 작동 합니다 .
답변
각도 5
HTML
<input type="file" #inputFile>
<button (click)="reset()">Reset</button>
주형
@ViewChild('inputFile') myInputVariable: ElementRef;
reset() {
this.myInputVariable.nativeElement.value = '';
}
버튼이 필요하지 않습니다. 변경 이벤트 이후에 리셋 할 수 있으며, 데모 용입니다.
답변
이를 달성하는 한 가지 방법은 입력을 <form>태그 로 래핑 하고 재설정하는 것입니다.
나는 NgForm또는 FormControl둘 중 하나에 thr 양식을 첨부하는 것을 고려하고 있지 않습니다 .
@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()
}
}
답변
일반적으로 선택한 파일을 캡처 한 후 파일 입력을 재설정합니다. 버튼을 누를 필요가 없습니다 . $event전달하려는 객체에 필요한 모든 것이 있습니다 onChange.
onChange(event) {
// Get your files
const files: FileList = event.target.files;
// Clear the input
event.srcElement.value = null;
}
다른 워크 플로이지만 OP는 버튼을 누르는 것이 요구 사항이라고 언급하지 않습니다.
답변
짧은 버전 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 {
}
그리고 더 일반적인 경우는 버튼을 사용하지 않고 자동으로 재설정하는 것입니다. Angular Template 문 은 연결 식을 지원하므로 Plunker :
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 );
}
}
그리고 가치 변화에 대한 재귀가없는 이유에 대한 흥미로운 링크 입니다.
답변
간단하다고 생각합니다. #variable을 사용합니다.
<input #variable type="file" placeholder="File Name" name="filename" (change)="onChange($event); variable.value='' ">
<button>Reset</button>
“variable.value = null”옵션도 사용 가능
답변
제 경우에는 아래와 같이했습니다.
<input #fileInput hidden (change)="uploadFile($event.target.files)" type="file" />
<button mat-button color="warn" (click)="fileInput.value=''; fileInput.click()"> Upload File</button>
component.ts에 ViewChild를 만드는 대신 HTML에서 #fileInput을 사용하여 재설정하고 있습니다. “파일 업로드”버튼을 클릭 할 때마다 먼저 #fileInput을 재설정 한 다음 #fileInput.click()기능 을 트리거 합니다. 재설정에 별도의 버튼이 필요한 경우 클릭시 #fileInput.value=''실행할 수 있습니다.
