Как сбросить выбранный файл с типом файла входного тега в Angular 2?

Вот как выглядит мой тег ввода:

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

Я хочу сбросить выбранный файл в Angular 2. Помощь будет очень признательна. Дайте мне знать, если вам понадобятся подробности.

PS

Я мог бы получить сведения о файле из $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, 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атрибут 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либо.

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

Я сбрасываю его с помощью #fileInput в HTML, а не создаю ViewChild в component.ts. При каждом нажатии кнопки «Загрузить файл» сначала сбрасывается #fileInput, а затем запускается #fileInput.click()функция. Если для сброса требуется какая-либо отдельная кнопка, то #fileInput.value=''ее можно выполнить по щелчку .

шаблон:

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

Я угловой машинописный текст, я добавил строки ниже, получил идентификатор вашей формы в формах документа и сделал это значение нулевым.

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

Я использую очень простой подход. После загрузки файла я вскоре удаляю элемент управления вводом, используя * ngIf. Это приведет к тому, что поле ввода будет удалено из dom и добавлено повторно, следовательно, это новый элемент управления и, следовательно, он пуст:

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