Question Twitter Bootstrap Formulaire de téléchargement d'élément de fichier


Pourquoi n'y a-t-il pas un bouton de téléchargement d'élément de fichier sophistiqué pour le bootstrap de Twitter? Ce serait adorable si le bouton principal bleu était implémenté pour le bouton de téléchargement. Est-il même possible de finesse le bouton de téléchargement en utilisant CSS? (semble être un élément de navigateur natif qui ne peut pas être manipulé)


510
2018-06-27 21:41


origine


Réponses:


Voici une solution pour Bootstrap 3 et 4.

Pour faire un contrôle d'entrée de fichier fonctionnel qui ressemble à un bouton, vous avez seulement besoin de HTML:

HTML

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

Cela fonctionne dans tous les navigateurs modernes, y compris IE9 +. Si vous avez également besoin d'une assistance pour l'ancien IE, veuillez utiliser l'approche héritée ci-dessous.

Cette technique repose sur le HTML5 hidden attribut. Bootstrap 4 utilise le code CSS suivant pour caler cette fonctionnalité dans les navigateurs non pris en charge. Vous devrez peut-être ajouter si vous utilisez Bootstrap 3.

[hidden] {
  display: none !important;
}

Une approche héritée pour les anciens IE

Si vous avez besoin de support pour IE8 et ci-dessous, utilisez le HTML / CSS suivant:

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

Notez que l'ancien IE ne déclenche pas l'entrée du fichier lorsque vous cliquez sur un <label>, alors le CSS "bloat" fait quelques choses pour contourner cela:

  • Rend l'entrée de fichier étendue sur toute la largeur / hauteur de l'environnement <span>
  • Rend l'entrée de fichier invisible

Commentaires et lectures supplémentaires

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

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


877
2017-08-10 17:30



Je suis surpris, il n'y avait aucune mention de la <label> élément.

Solution:

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

Pas besoin de JS, ou de css funky ...

Solution pour inclure le nom de fichier:

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

La solution ci-dessus nécessite jQuery.


332
2017-07-31 08:17



Sans plugin supplémentaire requis, cette solution bootstrap 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)

enter image description here

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

enter image description here


127
2018-02-21 07:02



Il est inclus dans la fourchette de bootstrap de Jasny.

Un bouton de téléchargement simple peut être créé en utilisant

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

Avec le plugin fileupload, vous pouvez créer des widgets plus avancés. Jettes un coup d'oeil à http://jasny.github.io/bootstrap/javascript/#fileinput


87
2017-10-16 13:10



Les boutons de téléchargement sont difficiles à styler car ils stylisent l'entrée et non le bouton.

mais vous pouvez utiliser cette astuce:

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

Résumé:

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

  2. Pour ce même élément parent, ajoutez une normale <input> et une image, qui ont les bons styles. Positionnez ces éléments absolument, de sorte qu'ils occupent la même place que le <input type="file">.

  3. Définir l'index z du <input type="file"> à 2 afin qu'il se trouve au-dessus de l'entrée / image stylée.

  4. Enfin, définissez l'opacité de <input type="file"> à 0. Le <input type="file"> maintenant devient effectivement invisible, et les styles input / image brille à travers, mais vous pouvez toujours cliquer sur le bouton "Parcourir". Si le bouton est positionné au-dessus de l'image, l'utilisateur semble cliquer sur l'image et obtient la fenêtre de sélection de fichier normale. (Notez que vous ne pouvez pas utiliser la visibilité: hidden, car un élément vraiment invisible est non cliquable, aussi, et nous avons besoin que l'on reste cliquable)


65
2018-06-27 21:59



Travaille pour moi:

Mettre à jour

Style de plugin jQuery:

// Based in: http://duckranger.com/2012/06/pretty-file-input-field-in-bootstrap/
// Version: 0.0.3
// Compatibility with: Bootstrap 3.2.0 and jQuery 2.1.1
// Use:
//     <input class="nice_file_field" type="file" data-label="Choose Document">
//     <script> $(".nice_file_field").niceFileField(); </script>
//
(function( $ ) {
  $.fn.niceFileField = function() {
    this.each(function(index, file_field) {
      file_field = $(file_field);
      var label = file_field.attr("data-label") || "Choose File";

      file_field.css({"display": "none"});

      nice_file_block_text  = '<div class="input-group nice_file_block">';
      nice_file_block_text += '  <input type="text" class="form-control">';
      nice_file_block_text += '  <span class="input-group-btn">';
      nice_file_block_text += '   <button class="btn btn-default nice_file_field_button" type="button">' + label + '</button>';
      nice_file_block_text += '  </span>';
      nice_file_block_text += '</div>';

      file_field.after(nice_file_block_text);

      var nice_file_field_button = file_field.parent().find(".nice_file_field_button");
      var nice_file_block_element = file_field.parent().find(".nice_file_block");

      nice_file_field_button.on("click", function(){ console.log("click"); file_field.click() } );
      file_field.change( function(){
        nice_file_block_element.find("input").val(file_field.val());
      });
    });
  };
})( jQuery );

21
2017-12-05 20:19



Réponse simplifiée en utilisant des parties provenant d'autres réponses, principalement user2309766 et dotcomsuperstar.

Caractéristiques:

  • Utilise l'extension du bouton Bootstrap pour le bouton et le champ.
  • Une seule entrée plusieurs entrées seraient ramassées par un formulaire.
  • Pas de css supplémentaire sauf "display: none" cacher l'entrée du fichier.
  • Le bouton visible déclenche un événement clic pour l'entrée de fichier caché.
  • split Pour supprimer le chemin du fichier, utilisez regex et les délimiteurs '\' et '/'.

Code:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="input-group">
  <span class="input-group-btn">
    <span class="btn btn-primary" onclick="$(this).parent().find('input[type=file]').click();">Browse</span>
    <input name="uploaded_file" onchange="$(this).parent().parent().find('.form-control').html($(this).val().split(/[\\|/]/).pop());" style="display: none;" type="file">
  </span>
  <span class="form-control"></span>
</div>


13
2018-05-27 17:29



En s'inspirant des autres articles ci-dessus, voici une solution complète qui combine ce qui ressemble à un champ de contrôle de formulaire avec un addon de groupe d'entrée pour un widget d'entrée de fichier propre qui inclut un lien vers le fichier actuel.

.input-file { position: relative; margin: 60px 60px 0 } /* Remove margin, it is just for stackoverflow viewing */
.input-file .input-group-addon { border: 0px; padding: 0px; }
.input-file .input-group-addon .btn { border-radius: 0 4px 4px 0 }
.input-file .input-group-addon input { cursor: pointer; position:absolute; width: 72px; z-index:2;top:0;right:0;filter: alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0; background-color:transparent; color:transparent; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="input-group input-file">
  <div class="form-control">
    <a href="/path/to/your/current_file_name.pdf" target="_blank">current_file_name.pdf</a>
  </div>
  <span class="input-group-addon">
    <a class='btn btn-primary' href='javascript:;'>
      Browse
      <input type="file" name="field_name" onchange="$(this).parent().parent().parent().find('.form-control').html($(this).val());">
    </a>
  </span>
</div>


11
2017-12-14 07:37



Cela fonctionne parfaitement pour moi

<span>
    <input  type="file" 
            style="visibility:hidden; width: 1px;" 
            id='${multipartFilePath}' name='${multipartFilePath}'  
            onchange="$(this).parent().find('span').html($(this).val().replace('C:\\fakepath\\', ''))"  /> <!-- Chrome security returns 'C:\fakepath\'  -->
    <input class="btn btn-primary" type="button" value="Upload File.." onclick="$(this).parent().find('input[type=file]').click();"/> <!-- on button click fire the file click event -->
    &nbsp;
    <span  class="badge badge-important" ></span>
</span>

8
2018-04-23 04:44



Veuillez vérifier s'il vous plait Twitter Bootstrap Fichier d'entrée. Il utilise une solution très simple, il suffit d'ajouter un fichier javascript et de coller le code suivant:

$('input[type=file]').bootstrapFileInput();

7
2018-04-19 09:33