Twitter Bootstrap Form Datei Element Upload Schaltfläche

Question

Warum gibt es keinen schicken Dateielement-Upload-Button für Twitter Bootstrap? Es wäre schön, wenn die blaue primäre Schaltfläche für die Upload-Schaltfläche implementiert wurde. Ist es überhaupt möglich, die Upload-Schaltfläche mit CSS zu verfeinern? (scheint ein natives Browser-Element zu sein, das nicht manipuliert werden kann)

Answer 1

Hier ist eine Lösung für Bootstrap 3, 4 und 5.

Um ein funktionales Dateieingabe-Steuerelement zu erstellen, das wie eine Schaltfläche aussieht, benötigen Sie nur HTML:

HTML

<label class="btn btn-default">
    Browse <input type="file" hidden>
</label>

Dies funktioniert in allen modernen Browsern, einschließlich IE9+. Wenn Sie auch Unterstützung für den alten IE benötigen, verwenden Sie bitte den unten dargestellten Legacy-Ansatz.

Diese Techniken beruhen auf der HTML5 hidden Attribut. Bootstrap 4 verwendet das folgende CSS, um diese Funktion in nicht unterstützenden Browsern zu unterdrücken. Sie müssen es möglicherweise hinzufügen, wenn Sie Bootstrap 3 verwenden.

[hidden] {
  display: none !important;
}

---

Älterer Ansatz für alten IE

Wenn Sie Unterstützung für IE8 und darunter benötigen, verwenden Sie das folgende HTML/CSS:

HTML

<span class="btn btn-default btn-file">
    Browse <input type="file">
</span>

CSS

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

Beachten Sie, dass der alte IE die Dateieingabe nicht auslöst, wenn Sie auf eine <label> Die CSS-"Aufblähung" tut also einiges, um das zu umgehen:

• Die Dateieingabe erstreckt sich über die gesamte Breite/Höhe des umgebenden <span>
• Macht die Dateieingabe unsichtbar

---

Feedback und zusätzliche Lektüre

Ich habe weitere Einzelheiten zu dieser Methode sowie Beispiele dafür veröffentlicht, wie dem Benutzer angezeigt werden kann, welche/wie viele Dateien ausgewählt wurden:

https://www.abeautifulsite.net/posts/whipping-file-inputs-into-shape-with-bootstrap-3/

Answer 2

Ich bin erstaunt, dass es keinen Hinweis auf die <label> Element.

Lösung:

<label class="btn btn-primary" for="my-file-selector">
    <input id="my-file-selector" type="file" class="d-none">
    Button Text Here
</label>

Keine Notwendigkeit für JS, oder funky css...

Lösung für die Angabe des Dateinamens:

<label class="btn btn-primary" for="my-file-selector">
    <input id="my-file-selector" type="file" style="display:none" 
    onchange="$('#upload-file-info').text(this.files[0].name)">
    Button Text Here
</label>
<span class='label label-info' id="upload-file-info"></span>

Die obige Lösung erfordert jQuery.

Hinweis: Verwenden Sie $.text() wenn auf der Seite vom Benutzer bereitgestellte Inhalte angezeigt werden. Eine frühere Version dieser Antwort verwendete $.html() was nicht sicher ist - Dateinamen können HTML-Auszeichnungen enthalten.

Answer 3

Da kein zusätzliches Plugin erforderlich ist, funktioniert diese Bootstrap-Lösung für mich hervorragend:

<div style="position:relative;">
        <a class='btn btn-primary' href='javascript:;'>
            Choose File...
            <input type="file" style='position:absolute;z-index:2;top:0;left:0;filter: alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;background-color:transparent;color:transparent;' name="file_source" size="40"  onchange='$("#upload-file-info").html($(this).val());'>
        </a>
        &nbsp;
        <span class='label label-info' id="upload-file-info"></span>
</div>

Demo:

http://jsfiddle.net/haisumbhatti/cAXFA/1/ (Bootstrap 2)

http://jsfiddle.net/haisumbhatti/y3xyU/ (Bootstrap 3)

Answer 4

Es ist in Jasnys Fork von Bootstrap enthalten.

Eine einfache Upload-Schaltfläche kann erstellt werden mit

<span class="btn btn-file">Upload<input type="file" /></span>

Mit dem Fileupload-Plugin können Sie erweiterte Widgets erstellen. Werfen Sie einen Blick auf http://jasny.github.io/bootstrap/javascript/#fileinput

Answer 5

Upload-Schaltflächen sind schwierig zu gestalten, weil die Eingabe und nicht die Schaltfläche gestaltet wird.

aber Sie können diesen Trick anwenden:

http://www.quirksmode.org/dom/inputfile.html

Zusammenfassung:

1. Nehmen Sie eine normale <input type="file"> und fügen es in ein Element mit position: relative .

2. Fügen Sie zu diesem übergeordneten Element ein normales <input> und ein Bild, die die richtigen Stile haben. Positionieren Sie diese Elemente absolut, so dass sie denselben Platz einnehmen wie die <input type="file"> .

3. Setzen Sie den z-Index der <input type="file"> auf 2 setzen, so dass sie über der gestalteten Eingabe/dem gestalteten Bild liegt.

4. Legen Sie schließlich die Deckkraft der <input type="file"> auf 0. Die <input type="file"> wird nun praktisch unsichtbar, und die Stileingabe/das Bild scheint durch, aber Sie können immer noch auf die Schaltfläche "Durchsuchen" klicken. Wenn die Schaltfläche über dem Bild positioniert ist, scheint der Benutzer auf das Bild zu klicken und erhält das normale Dateiauswahlfenster. (Beachten Sie, dass Sie visibility: hidden nicht verwenden können, da ein wirklich unsichtbares Element auch nicht anklickbar ist, und wir die Schaltfläche anklickbar halten müssen)