wie Sie trigger-Ereignis klicken Sie auf der input-Datei aus-Taste, klicken Sie auf im Winkel 2?

HTML:

<input type="file" accept="image/*">

<button>Upload file</button>

Wie trigger-Ereignis klicken Sie auf der input type=file von der Schaltfläche click-Ereignis im Winkel 2?

InformationsquelleAutor amol | 2016-05-19
  1. 81

    Nutzen Sie die Vorlage Referenz-variable wie folgt:

    <input type="file" accept="image/*" #file>
<button (click)="file.click()">Upload file</button>

    Den entsprechenden plunkr ist hier https://plnkr.co/edit/JB4HY0oxEUgXXIht2wAv?p=preview

    • Dank Ihre Arbeit..
    • ist es sicher zu bedienen. Wird auf die Datei input programmatisch arbeiten in unterschiedlichen Browsern auf desktop-und Mobilgeräten im Jahr 2018.
    InformationsquelleAutor yurzui
  2. 9

    Könnten Sie tun haben, deklarieren Sie Variablen für input-file-Feld als #file & dann erst Datei ändere nennen upload Funktion übergeben hochgeladenen Datei, um zu funktionieren.

    <input #file type="file" accept="image/*" (change)="upload(file.files)">

<button #upload (click)="file.click()">Upload file</button>
    InformationsquelleAutor Pankaj Parkar
  3. 5

    Im Winkel 4,

    HTML: 

    <ion-input type="file" formControlName="avatar"></ion-input>
<button type="button" ion-button (click)="selectFile()"></button>

    Javascript:

    selectFile() {
    let element: HTMLElement = document.querySelector('input[type="file"]') as HTMLElement;
    element.click();
}

    Ist es Arbeit für mich.

    InformationsquelleAutor maSC0d3R
  4. 3

    Im Winkel 4,

    HTML:

    <input #fileUpload type="file" (click)="fileUpload.value = null"(change)="importFile($event)" style="display:none"
accept="image/*">
<button (click)="fileUpload.click()">  </button>

    Typoskript:

    importFile(event) {

if (event.target.files.length == 0) {
   console.log("No file selected!");
   return
}
  let file: File = event.target.files[0];
  //after here 'file' can be accessed and used for further process
}

    Berücksichtigung von zukünftigen Problem der Auswahl der gleichen Datei funktioniert nicht, Im input-tag klicken Sie auf event setzen wir auf null, die erlaubt, die gleiche Datei wählen Sie die zweite Zeit.

    • Sie finden das update oben.
    InformationsquelleAutor Mani deep
Schreibe einen Kommentar