Làm cách nào để đặt lại tệp đã chọn với loại tệp thẻ đầu vào trong Angular 2?

Đây là cách thẻ đầu vào của tôi trông như thế nào:

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

Tôi muốn đặt lại tệp đã chọn trong Angular 2. Trợ giúp sẽ được đánh giá rất cao. Hãy cho tôi biết nếu như bạn cần thêm chị tiết.

PS

Tôi có thể lấy thông tin chi tiết tệp từ $eventcác tham số và lưu nó trong một biến typecript, nhưng biến này không bị ràng buộc với thẻ đầu vào.

Bạn có thể sử dụng ViewChildđể truy cập đầu vào trong thành phần của mình. Trước tiên, bạn cần thêm #someValuevào thông tin đầu vào của mình để bạn có thể đọc nó trong thành phần:

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

Sau đó, trong thành phần của bạn, bạn cần nhập ViewChildtừ @angular/core:

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

Sau đó, bạn sử dụng ViewChildđể truy cập đầu vào từ mẫu:

@ViewChild('myInput')
myInputVariable: ElementRef;

Bây giờ, bạn có thể sử dụng myInputVariableđể đặt lại tệp đã chọn vì đó là tham chiếu đến đầu vào #myInput, ví dụ: phương thức tạo reset()sẽ được gọi trong clicksự kiện nút của bạn:

reset() {
    console.log(this.myInputVariable.nativeElement.files);
    this.myInputVariable.nativeElement.value = "";
    console.log(this.myInputVariable.nativeElement.files);
}

Đầu tiên console.logsẽ in tệp bạn đã chọn, thứ hai console.logsẽ in một mảng trống vì this.myInputVariable.nativeElement.value = "";xóa (các) tệp đã chọn khỏi đầu vào. Chúng ta phải sử dụng this.myInputVariable.nativeElement.value = "";để đặt lại giá trị của đầu vào vì FileListthuộc tính của đầu vào là chỉ đọc , vì vậy không thể chỉ xóa mục khỏi mảng. Đây là Plunker đang hoạt động .

Góc 5

html

<input type="file" #inputFile>

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

bản mẫu

@ViewChild('inputFile') myInputVariable: ElementRef;

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

Nút không bắt buộc. Bạn có thể đặt lại nó sau sự kiện thay đổi, nó chỉ để trình diễn

Một cách để đạt được điều đó là bọc đầu vào của bạn trong <form>thẻ và đặt lại nó.

Tôi không xem xét đính kèm biểu mẫu thr vào NgFormhoặc FormControlmột trong hai.

@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

Tôi thường đặt lại đầu vào tệp của mình sau khi chụp các tệp đã chọn. Không cần nhấn nút, bạn có mọi thứ cần thiết trong $eventđối tượng mà bạn đang chuyển đến onChange:

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

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

Quy trình làm việc khác nhau, nhưng OP không đề cập đến việc nhấn nút là một yêu cầu ...

Phiên bản ngắn 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 {


}

Và tôi nghĩ rằng trường hợp phổ biến hơn là không sử dụng nút mà tự động đặt lại. Các câu lệnh Angular Template hỗ trợ các biểu thức chuỗi vì vậy 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 );
  }

}

Và liên kết thú vị về lý do tại sao không có đệ quy về sự thay đổi giá trị.

Tôi nghĩ nó đơn giản, sử dụng #variable

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

tùy chọn "variable.value = null" cũng có sẵn

Trong trường hợp của tôi, tôi đã làm như sau:

 <input #fileInput hidden (change)="uploadFile($event.target.files)" type="file" />
 <button mat-button color="warn" (click)="fileInput.value=''; fileInput.click()"> Upload File</button>

Tôi đang đặt lại nó bằng cách sử dụng #fileInput trong HTML thay vì tạo ViewChild trong component.ts. Bất cứ khi nào nút "Tải lên tệp" được nhấp vào, trước tiên, nút này sẽ đặt lại #fileInput và sau đó kích hoạt #fileInput.click()chức năng. Nếu bất kỳ nút riêng biệt nào cần thiết để đặt lại thì khi nhấp chuột #fileInput.value=''có thể được thực hiện.

bản mẫu:

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

thành phần:

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

Nếu bạn đang gặp sự cố với ng2-file-upload,

HTML:

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

thành phần

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

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

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

Tôi đã thêm thẻ đầu vào này vào thẻ biểu mẫu ..

 <form id="form_data">
  <input  type="file" id="file_data"  name="browse"
  (change)="handleFileInput($event, dataFile, f)"  />
</form>

Tôi đánh dấu góc cạnh, tôi đã thêm các dòng bên dưới, lấy id biểu mẫu của bạn trong các biểu mẫu tài liệu và đặt giá trị đó là 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'] = "";
              }
      }
    }

In document.forms trong bảng điều khiển và bạn có thể có ý tưởng ..

bạn có thể sử dụng biến tham chiếu mẫu và gửi đến một phương thức

html

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

thành phần

onChange(event: any, element): void {
    // codes
    element.value = '';
  }

Tôi đang sử dụng một aproach rất đơn giản. Sau khi một tệp được tải lên, tôi sẽ nhanh chóng gỡ bỏ điều khiển đầu vào, sử dụng * ngIf. Điều đó sẽ khiến trường đầu vào bị xóa khỏi dom và được thêm lại, do đó nó là một điều khiển mới và do đó nó hoàn toàn là:

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