[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.logthis.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()
  }
}

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


답변

일반적으로 선택한 파일을 캡처 한 후 파일 입력을 재설정합니다. 버튼을 누를 필요가 없습니다 . $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=''실행할 수 있습니다.