mit input type file mit kantigem material 2

Wie kann ich mit Winkel material-2 FAB-Tasten zu öffnen ein durchsuchen-Dialogfeld input? Diese kann getan werden in HTML durch diese Weise.

<button type="button">
    <label for="file-input">click</label>
</button>
<input type="file" id="file-input" style="display:none">

Ich habe versucht, nach dem gleichen Ansatz, mit material 2, aber es funktioniert nicht.

<button md-mini-fab type="button">
    <label for="fileToUpload">
        <md-icon>add</md-icon>
    </label>
</button>
<input id="fileToUpload" type="file" style="display:none;">

Gibt es andere Möglichkeiten, die funktionieren??? Danke.

InformationsquelleAutor Saif Ullah | 2017-05-23

angular angular-material2

12

Müssen Sie einfach nur die trigger der click für Ihre Datei input.
```
<button md-mini-fab type="button" onclick="document.getElementById('fileToUpload').click()">
  <label for="fileToUpload"><md-icon>add</md-icon></label>
</button>
<input id="fileToUpload" type="file" style="display:none;">
```
dies wird auch der Streifen nach unten die Notwendigkeit für label-tag, aber diese Lösung verwendet JS. Eigentlich wollte ich die Verwendung als minimum JS wie möglich. Speziell möchte ich nicht verwenden, jede Sache, wie Dokument.getElementById und ähnliche Dinge. Nun, es mag mich retten, wenn sonst nichts funktioniert.
Sie können gehen für eine Richtlinie und dann kann es zu erreichen, indem ` element.bind("click",., aber es wird so sein wie machen es komplexer. :),
können Sie mir bitte helfen um dieses Problem zu lösen stackoverflow.com/questions/52143052/... @anoop

InformationsquelleAutor anoop
35

Hier ist eine einfache Lösung:
```
<button (click)="fileInput.click()">
  <md-icon>library_add</md-icon>
  <span>Select</span>
  <input #fileInput type="file" (change)="onFileInput($event)" style="display:none;" />
</button>
```
Dies sollte markiert werden, wie die richtige Antwort, wie es nicht zu brechen Abstraktion. Winkel sollte verwendet werden, w/o Kenntnis der DOM.
Vielen Dank, sehr einfache und nützliche Lösung. Dies ist die richtige Antwort für mich.

InformationsquelleAutor rhyttr
8

Versuchen Sie dies:
```
<input #file type="file" [hidden]="true" accept="image/*" (change)="upload(file.files)">
<button mat-button #upload (click)="file.click()">Upload file</button>
```
<mat-button> ist aus https://material.angular.io

Verstecken wir uns den basic-input-Taste und die Verknüpfung der material-Taste, um die Datei hochzuladen.

InformationsquelleAutor Ashwin R
5

Ich bin mir nicht sicher über Ihre Fälle, aber in meinem Angular5 Anwendung, die ich verwendet diese HTML-Struktur für das hochladen von Dateien auf den server:
```
<label for="uploadPicture" class="upload-file">
   <mat-icon>add_a_photo</mat-icon>
</label>
<input type="file"
       id="uploadPicture"
       class="hidden-input"
       accept="image/jpeg, .jpeg, image/png, .png, image/pjpeg, .jpg"
       (change)="selectFile($event.target.files[0])">
```
In meinem Fall diese Lösung funktioniert Super. Keine Notwendigkeit, um die trigger - click Ereignis, weil Sie, wenn Sie auf <label> im Hinblick auf die input es ist dasselbe wie click auf input.

wow, das ist so genial, ich war auf der Suche für das gleiche. Aber wie hast du die Anzeige der ausgewählten Dateinamen???
Einfache Lösung - (ändern)="selectFile ("$event.Ziel.Dateien)" wird übergeben filedata in Funktion und argument. In Sie .ts-Datei, die Sie haben: öffentliche selectFile ("Datei"): void { dies.someVariableForFileName = Datei.name } und zeigen Sie diese variable in der HTML-Ansicht: <div class="Datei-name" *ngIf="someVariableForFileName">{{someVariableForFileName}}</div> Hoffe, es hilft Ihnen. 🙂

InformationsquelleAutor alexJS
0

Es kann aus einer Kombination von md-Taste, md-dialog-und md-Eingang. Die mini-fab-Taste muss eine click-Ereignis für das auslösen der md-dialog-Komponente.
```
<button md-mini-fab type="button" (click)="openDialog()">
    <label for="fileToUpload">
      <md-icon>add</md-icon>
    </label>
</button>
```
Innerhalb der md-dialog-Komponente, md-Eingabefeld Hinzugefügt werden können.
```
<h1 md-dialog-title>Dialog</h1>
<div md-dialog-actions>
  <md-input-container>
    <input mdInput id="fileToUpload" type="file">
  </md-input-container>
  <p>
    <button md-button (click)="dialogRef.close('Option 1')">Option 1</button>
    <button md-button (click)="dialogRef.close('Option 2')">Option 2</button>
  </p>
</div>
```
Finden Sie in diesem Plunker Beispiel, um alle/bestimmte details.

das ist eigentlich zwei Klicks für nur ein input-type-file-Funktionalität, was nicht, was ich gefragt habe. Ich möchte nur geben material 2 design-Eingang mit Typ-Datei. Das ist keine option zur Verfügung gestellt von material. Es gibt nur workarounds zur Verfügung.

InformationsquelleAutor Nehal

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.