Bouton de Twitter Bootstrap forme élément de File upload

Question

Pourquoi n’y a-t-il pas un bouton de téléchargement fichier fantaisie element pour twitter bootstrap ? elle serait douce si le bouton bleu primaire a été mis en place pour le bouton de téléchargement. Il est même possible de peaufiner le bouton upload utilise CSS (semble être un élément de navigateur natif qui ne peut pas être manipulé)

Answer 1

Voici une solution pour Bootstrap 3.

Pour rendre fonctionnel le fichier de contrôle d'entrée qui ressemble à un bouton, vous avez seulement besoin de 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;
}

J'ai posté plus de détails sur cette méthode, ainsi que des exemples de la façon de montrer à l'utilisateur combien de fichiers sont sélectionnés:

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

Answer 2

Im surpris il y avait aucune mention de la `` élément.

Solution :

Pas besoin de JS ou css funky...

Answer 3

Sans plugin supplémentaire requis, cette amorce de solution fonctionne très bien pour moi:

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

démo:

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

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

Answer 4

Il est inclus dans la fourchette de Jasny du bootstrap.

Un bouton de téléchargement simple peut être créé à l’aide

Avec le plugin fileupload vous pouvez créer des widgets plus avancés. Jetez un oeil sur http://jasny.github.io/bootstrap/javascript/#fileinput

Answer 5

Télécharger boutons sont une douleur de style, car il les styles de l'entrée et non sur le bouton.

mais vous pouvez utiliser cette astuce:

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

Résumé:

1. Prendre un normal <input type="file"> et le mettre dans un élément avec position: relative.

2. À ce même élément parent, ajouter un normal <input> et une image, qui ont le bon les styles. La Position de ces éléments absolument, afin qu'ils occupent la même place que l' <input type="file">.

3. Définir le z-index de l' <input type="file"> de 2, de sorte que il se trouve sur le haut du style d'entrée/de l'image.

4. Enfin, réglez l'opacité de l' <input type="file"> à 0. L' <input type="file"> devient maintenant effectivement invisible, et les styles d'entrée/image brille à travers, mais vous pouvez toujours cliquer sur le bouton "Parcourir". Si le bouton est positionné sur le haut de l'image, l'utilisateur s'affiche, cliquez sur l'image et obtient la normale de la fenêtre de sélection de fichier. (Notez que vous ne pouvez pas utiliser visibility: hidden, parce que vraiment invisible élément est unclickable, trop, et nous devons le rester cliquable)