web-dev-qa-db-de.com

Kann ich ng2-file-upload anstelle einer Dateieingabe mit button verwenden?

Ich verwende ng2-file-upload (Beispiel für einen einzelnen Upload) und möchte: ng2FileSelect mit einem Button oder einem div anstelle einer Dateieingabe verwenden. Wie kann ich das machen?

Ich möchte, dass es so etwas tut:

<button ng2FileSelect [uploader]="uploader">Choose file</button>

Anstatt:

<input type="file" ng2FileSelect [uploader]="uploader" />

Wenn es keinen sauberen Weg mit ng2-file-upload gibt, wissen Sie eine Alternative?

13
Leantraxxx

Eine mögliche Lösung besteht darin, die Vorlagenvariablen von Angular 2 zu nutzen und dem Eingabeelement eine Vorlagenvariable zuzuweisen. Sobald dies erledigt ist, können Sie direkt für diese Eingabe definierte Methoden von einem anderen Element aus aufrufen, z. B. einer Schaltfläche.

Ich habe folgendes in einer meiner Bewerbungen gemacht; Es funktioniert auf IE11, Firefox und Chrome:

<button (click)="fileInput.click()" class="btn btn-default">Upload</button>
<span style="visibility: hidden; position: absolute; overflow: hidden; width: 0px; height:0px;border:none;margin:0; padding:0">
     <input type="file" #fileInput ng2FileSelect [uploader]="uploader" />
</span>

Wie Sie sehen, ruft die Schaltfläche einfach das Click-Ereignis von # fileInput innerhalb ihres eigenen Click-Ereignisses auf.

Beachten Sie, dass ich die Eingabe innerhalb eines span verstecke und dann die Spanne mithilfe einer Reihe von Stilen aus der Ansicht ausblenden, sodass nur die Schaltfläche sichtbar ist. Beachten Sie auch, dass das Anwenden dieser Stile auf das Eingabeelement direkt Probleme im IE11 verursacht hat.

21
RMD

Sie können das input[file]-Element mit einem label-Element umschließen und es ausblenden. Siehe diese Antwort und dieses Beispiel

Hier ist der Code.

HTML:

<label for="file-upload" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i> Custom Upload
</label>
<input id="file-upload" type="file"/>

CSS:

input[type="file"] {
    display: none;
}
.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}
4
Roman Kondakov

Auf einfache Weise können Sie dies mit label tun, Sie müssen nur die input ausblenden.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<label class="btn custom-input-btn">
<input type="file" name="photo" style="display:none" accept="*" multiple>        
<i class="fa fa-cloud-upload"></i> Upload Files
</label>

1
Samurai