Kann ich ng2-Datei-upload mit dem button statt ein file-input?

Ich bin mit ng2-Datei-upload (Einzel-upload-Beispiel) und ich verwenden möchte: ng2FileSelect mit einer Schaltfläche oder ein div-Element statt eines Datei-Eingabe. Wie kann ich dies tun?

Möchte ich dies zu tun so etwas wie dieses:

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

Statt:

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

Wenn nicht vorhanden eine saubere Art und Weise mit ng2-Datei-upload, wissen Sie eine alternative?

  • Finden Sie einen Weg, dies zu erreichen?
InformationsquelleAutor Leantraxxx | 2016-08-24
  1. 23

    Eine mögliche Lösung ist die Nutzung von Winkel-2 template-Variablen und zuweisen einer template-Variablen zum input-element; sobald Sie dies getan haben, können Sie direkt aufrufen von Methoden definiert, dass die Eingabe von einem anderen element, beispielsweise eine Schaltfläche.

    Habe ich Folgendes in einer meiner Anwendungen; 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>

    So wie Sie sehen können, ist die Schaltfläche einfach den Aufruf der #fileInput click-Ereignis innerhalb seiner eigenen click-Ereignis.

    Beachten Sie, dass ich zu begraben, der Eingang innerhalb einer span, und dann verstecken Sie die Spanne von der Ansicht über eine Reihe von Stilen, so dass nur der button sichtbar ist. Beachten Sie auch, dass die Anwendung dieser Stile, um das input-element direkt schien, zu Problemen in IE11.

    • Tolle Idee! Ihr Beispiel war ein gutes Modell, dass für mich gearbeitet. Danke!!!
    • Es hat gut funktioniert. Danke 😉
    • Brillante Lösung. Danke.
    • tolle Lösung! vielen Dank 🙂
    InformationsquelleAutor RMD
  2. 7

    Yon wickeln kann input[file] - element mit label-element und blenden es. Sehen 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;
}
    InformationsquelleAutor Roman Kondakov
  3. 1

    In einer einfachen Art und Weise, die Sie tun können, es mit label, Sie müssen nur ausblenden, die Eingang.

    HTML:

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

    InformationsquelleAutor Samurai
Schreibe einen Kommentar