จะรีเซ็ตไฟล์ที่เลือกด้วยประเภทไฟล์แท็กอินพุตใน 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 = "";เพื่อรีเซ็ตค่าของอินพุตเนื่องจากFileListแอตทริบิวต์ของอินพุตเป็นแบบอ่านอย่างเดียวดังนั้นจึงเป็นไปไม่ได้ที่จะลบรายการออกจากอาร์เรย์ นี่คือPlunker ที่ใช้งานได้

เชิงมุม 5

html

<input type="file" #inputFile>

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

แม่แบบ

@ViewChild('inputFile') myInputVariable: ElementRef;

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

ไม่จำเป็นต้องใช้ปุ่ม คุณสามารถรีเซ็ตได้หลังจากเหตุการณ์การเปลี่ยนแปลงเป็นเพียงการสาธิต

วิธีหนึ่งในการบรรลุเป้าหมายคือการรวมข้อมูลที่คุณป้อนไว้ใน<form>แท็กและตั้งค่าใหม่

ฉันไม่ได้พิจารณาแนบแบบฟอร์ม THR ไป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

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

ฉันใช้ aproach ง่ายมาก หลังจากอัปโหลดไฟล์ฉันจะลบการควบคุมอินพุตในไม่ช้าโดยใช้ * 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 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;
    }
  }