Angular 2에서 입력 태그 파일 형식으로 선택한 파일을 재설정하려면 어떻게 해야 합니까?

Angular 2에서 입력 태그 파일 형식으로 선택한 파일을 재설정하려면 어떻게 해야 합니까?

입력 태그는 다음과 같습니다.

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

Angular 2에서 선택한 파일을 재설정하고 싶습니다.도와주시면 대단히 감사하겠습니다.더 자세한 정보가 필요하시면 말씀하세요.

추신.

파일 세부 정보를 얻을 수 있습니다.$event매개 변수를 입력하고 타이프스크립트 변수에 저장하지만 이 변수는 입력 태그에 바인딩되지 않습니다.

사용할 수 있습니다.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, 예를 들어 create method를 사용합니다.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특성이 읽기 전용이므로 배열에서 항목을 제거할 수 없습니다.여기 일하는 플런커가 있습니다.

일반적으로 선택한 파일을 캡처한 후 파일 입력을 재설정합니다.버튼을 누를 필요가 없습니다. 필요한 모든 것이 있습니다.$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더 이상 사용되지 않습니다.

각도가 5입니다.

html을 클릭합니다.

<input type="file" #inputFile>

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

템플릿입니다.

@ViewChild('inputFile') myInputVariable: ElementRef;

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

버튼이 필요하지 않습니다.변경 이벤트 후 재설정할 수 있습니다. 시연용입니다.

이를 달성하는 한 가지 방법은 입력 내용을 정리하는 것입니다.<form>태그를 지정하고 재설정합니다.

양식을 첨부할 생각은 없습니다.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

짧은 버전 플런커:

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 );
  }

}

값 변경 시 재귀가 없는 이유에 대한 흥미로운 링크입니다.

간단한 것 같습니다. #변수 사용

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

"syslog.value = null" 옵션도 사용할 수 있습니다.

템플릿 참조 변수를 사용하여 메서드로 전송할 수 있습니다.

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>

Component.ts.component.ts의 ViewChild를 생성하는 대신 HTML의 #fileInput을 사용하여 재설정하고 .파일 업로드" 버튼을 클릭할 마다 먼저 #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">

템플릿:

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

구성 요소:

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

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

이 입력 태그를 양식 태그에 추가해야 합니다.

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

문서를 인쇄합니다.콘솔에서 양식을 작성하면 아이디어를 얻을 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/40165271/how-to-reset-selected-file-with-input-tag-file-type-in-angular-2 입니다.