Bouton de téléchargement de l’élément de fichier de formulaire Twitter Bootstrap

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

Voici une solution pour Bootstrap 3 et 4.

Pour créer un contrôle d’entrée de fichier fonctionnel qui ressemble à un bouton, vous avez uniquement besoin du code HTML:

HTML

 

Cela fonctionne avec 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 l’atsortingbut hidden HTML5. Bootstrap 4 utilise le CSS suivant pour modifier cette fonctionnalité dans les navigateurs non compatibles. Vous devrez peut-être append si vous utilisez Bootstrap 3.

 [hidden] { display: none !important; } 

Approche héritée pour l’ancien IE

Si vous avez besoin de support pour IE8 et versions ultérieures, utilisez le code HTML / CSS suivant:

HTML

  Browse   

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 de fichier lorsque vous cliquez sur un , de sorte que le “bloat” The CSS fonctionne de plusieurs manières:

  • Fait en sorte que l’entrée de fichier couvre toute la largeur / hauteur de l’environnement
  • 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 combien de fichiers sont sélectionnés:

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

Je suis surpris qu’il n’y ait aucune mention de l’élément .

Solution:

  

Pas besoin de JS, ni de funky css …

Solution pour inclure le nom de fichier:

   

La solution ci-dessus nécessite jQuery.

En l’absence de plug-in supplémentaire, cette solution de démarrage fonctionne parfaitement pour moi:

  

démo:

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

entrer la description de l'image ici

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

entrer la description de l'image ici

Il est inclus dans la fourchette de bootstrap de Jasny.

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

 Upload 

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

Les boutons de téléchargement sont difficiles à coiffer, car ils traitent 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 et placez-le dans un élément avec position: relative .

  2. Pour ce même élément parent, ajoutez une normale et une image qui ont les styles corrects. Positionnez ces éléments absolument, afin qu’ils occupent la même place que le .

  3. Définissez l’index z du sur 2 pour qu’il se trouve au-dessus de l’entrée / de l’image stylée.

  4. Enfin, définissez l’opacité du sur 0. Le devient désormais effectivement invisible et l’entrée / image des styles passe au travers, mais vous pouvez toujours cliquer sur “Parcourir ” bouton. Si le bouton est placé en haut 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é: masqué, car un élément vraiment invisible est également non cliquable, et nous avons besoin de restr cliquable)

Travaille pour moi:

  • Joli champ de saisie de fichier dans Bootstrap

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: //  //  // (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 = '
'; nice_file_block_text += ' '; nice_file_block_text += ' '; nice_file_block_text += ' '; nice_file_block_text += ' '; nice_file_block_text += '
'; 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 );

Réponse simplifiée en utilisant des pièces provenant d’autres réponses, principalement user2309766 et dotcomsuperstar.

Caractéristiques:

  • Utilise un addon pour le bouton Bootstrap pour le bouton et le champ.
  • Une seule entrée; plusieurs entrées seraient captées par un formulaire.
  • Pas de css supplémentaire sauf “display: none;” pour masquer 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 utilise l’expression régulière et les délimiteurs ‘\’ et ‘/’.

Code:

    
Browse

En s’inspirant d’autres publications ci-dessus, voici une solution complète qui combine ce qui ressemble à un champ de contrôle de formulaire avec un addon-group-addon pour un widget de saisie de fichier propre qui inclut un lien vers le fichier en cours.

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

Cela fonctionne parfaitement pour moi

          

S’il vous plaît vérifier Twitter Bootstrap File Input . Il utilise une solution très simple, ajoutez simplement un fichier javascript et collez le code suivant:

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

Une solution simple avec des résultats acceptables:

  

Et le style:

 input[type=file].form-control { height: auto; } 

J’ai créé un bouton de téléchargement personnalisé pour accepter uniquement les images, qui peuvent être modifiées selon vos besoins.

J’espère que cela t’aides!! 🙂

(Framework Bootstrap utilisé)

Codepen-link

HTML

 


Upload Button Re-Imagined

Upload your Organizations logo

CSS

  .head { font-size: 25px; font-weight: 200; } .blue-btn:hover, .blue-btn:active, .blue-btn:focus, .blue-btn { background: transparent; border: solid 1px #27a9e0; border-radius: 3px; color: #27a9e0; font-size: 16px; margin-bottom: 20px; outline: none !important; padding: 10px 20px; } .fileUpload { position: relative; overflow: hidden; height: 43px; margin-top: 0; } .fileUpload input.uploadlogo { position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); width: 100%; height: 42px; } /*Chrome fix*/ input::-webkit-file-upload-button { cursor: pointer !important; } 

JS

 // You can modify the upload files to pdf's, docs etc //Currently it will upload only images $(document).ready(function($) { // Upload btn $(".uploadlogo").change(function() { readURL(this); }); function readURL(input) { var url = input.value; var ext = url.subssortingng(url.lastIndexOf('.') + 1).toLowerCase(); if (input.files && input.files[0] && (ext == "png" || ext == "jpeg" || ext == "jpg" || ext == "gif" || ext == "svg")) { var path = $('.uploadlogo').val(); var filename = path.replace(/^.*\\/, ""); $('.fileUpload span').html('Uploaded logo : ' + filename); // console.log(filename); } else { $(".uploadlogo").val(""); $('.fileUpload span').html('Only Images Are Allowed!'); } } }); 

c’est le meilleur style de téléchargement de fichiers que j’aime:

 
Select fileChangeRemove

vous pouvez obtenir la démo et plus de styles à:

http://www.jasny.net/bootstrap/javascript/#fileinput

mais en utilisant ceci, vous devriez remplacer le bootstrap de twitter avec les fichiers de bootstrap de jasny.

Cordialement.

J’utilise http://gregpike.net/demos/bootstrap-file-input/demo.html :

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

ou

 $('.file-inputs').bootstrapFileInput(); 

Solution pour le téléchargement multiple

J’ai modifié deux réponses précédentes pour inclure plusieurs téléchargements. De cette manière, l’étiquette indique le nom du fichier, si un seul est sélectionné, ou x files dans le cas contraire.

   

entrer la description de l'image ici

Cela peut aussi s’appliquer pour changer le texte du bouton et la classe.

  

entrer la description de l'image ici

/ * * Bootstrap 3 filestyle * http://dev.tudosobreweb.com.br/bootstrap-filestyle/ * * Copyright (c) 2013 Markus Vinicius da Silva Lima * Mise à jour du bootstrap 3 par Paulo Henrique Foxer * Version 2.0.0 * Licence sous licence MIT. * * /

 (function ($) { "use ssortingct"; var Filestyle = function (element, options) { this.options = options; this.$elementFilestyle = []; this.$element = $(element); }; Filestyle.prototype = { clear: function () { this.$element.val(''); this.$elementFilestyle.find(':text').val(''); }, destroy: function () { this.$element .removeAttr('style') .removeData('filestyle') .val(''); this.$elementFilestyle.remove(); }, icon: function (value) { if (value === true) { if (!this.options.icon) { this.options.icon = true; this.$elementFilestyle.find('label').prepend(this.htmlIcon()); } } else if (value === false) { if (this.options.icon) { this.options.icon = false; this.$elementFilestyle.find('i').remove(); } } else { return this.options.icon; } }, input: function (value) { if (value === true) { if (!this.options.input) { this.options.input = true; this.$elementFilestyle.prepend(this.htmlInput()); var content = '', files = []; if (this.$element[0].files === undefined) { files[0] = {'name': this.$element[0].value}; } else { files = this.$element[0].files; } for (var i = 0; i < files.length; i++) { content += files[i].name.split("\\").pop() + ', '; } if (content !== '') { this.$elementFilestyle.find(':text').val(content.replace(/\, $/g, '')); } } } else if (value === false) { if (this.options.input) { this.options.input = false; this.$elementFilestyle.find(':text').remove(); } } else { return this.options.input; } }, buttonText: function (value) { if (value !== undefined) { this.options.buttonText = value; this.$elementFilestyle.find('label span').html(this.options.buttonText); } else { return this.options.buttonText; } }, classButton: function (value) { if (value !== undefined) { this.options.classButton = value; this.$elementFilestyle.find('label').attr({'class': this.options.classButton}); if (this.options.classButton.search(/btn-inverse|btn-primary|btn-danger|btn-warning|btn-success/i) !== -1) { this.$elementFilestyle.find('label i').addClass('icon-white'); } else { this.$elementFilestyle.find('label i').removeClass('icon-white'); } } else { return this.options.classButton; } }, classIcon: function (value) { if (value !== undefined) { this.options.classIcon = value; if (this.options.classButton.search(/btn-inverse|btn-primary|btn-danger|btn-warning|btn-success/i) !== -1) { this.$elementFilestyle.find('label').find('i').attr({'class': 'icon-white '+this.options.classIcon}); } else { this.$elementFilestyle.find('label').find('i').attr({'class': this.options.classIcon}); } } else { return this.options.classIcon; } }, classInput: function (value) { if (value !== undefined) { this.options.classInput = value; this.$elementFilestyle.find(':text').addClass(this.options.classInput); } else { return this.options.classInput; } }, htmlIcon: function () { if (this.options.icon) { var colorIcon = ''; if (this.options.classButton.search(/btn-inverse|btn-primary|btn-danger|btn-warning|btn-success/i) !== -1) { colorIcon = ' icon-white '; } return ' '; } else { return ''; } }, htmlInput: function () { if (this.options.input) { return ' '; } else { return ''; } }, constructor: function () { var _self = this, html = '', id = this.$element.attr('id'), files = []; if (id === '' || !id) { id = 'filestyle-'+$('.bootstrap-filestyle').length; this.$element.attr({'id': id}); } html = this.htmlInput()+ ''; this.$elementFilestyle = $('
'+html+'
'); var $label = this.$elementFilestyle.find('label'); var $labelFocusableContainer = $label.parent(); $labelFocusableContainer .attr('tabindex', "0") .keypress(function(e) { if (e.keyCode === 13 || e.charCode === 32) { $label.click(); } }); // hidding input file and add filestyle this.$element .css({'position':'absolute','left':'-9999px'}) .attr('tabindex', "-1") .after(this.$elementFilestyle); // Getting input file value this.$element.change(function () { var content = ''; if (this.files === undefined) { files[0] = {'name': this.value}; } else { files = this.files; } for (var i = 0; i < files.length; i++) { content += files[i].name.split("\\").pop() + ', '; } if (content !== '') { _self.$elementFilestyle.find(':text').val(content.replace(/\, $/g, '')); } }); // Check if browser is Firefox if (window.navigator.userAgent.search(/firefox/i) > -1) { // Simulating choose file for firefox this.$elementFilestyle.find('label').click(function () { _self.$element.click(); return false; }); } } }; var old = $.fn.filestyle; $.fn.filestyle = function (option, value) { var get = '', element = this.each(function () { if ($(this).attr('type') === 'file') { var $this = $(this), data = $this.data('filestyle'), options = $.extend({}, $.fn.filestyle.defaults, option, typeof option === 'object' && option); if (!data) { $this.data('filestyle', (data = new Filestyle(this, options))); data.constructor(); } if (typeof option === 'ssortingng') { get = data[option](value); } } }); if (typeof get !== undefined) { return get; } else { return element; } }; $.fn.filestyle.defaults = { 'buttonText': 'Escolher arquivo', 'input': true, 'icon': true, 'inputWidthPorcent': 65, 'classButton': 'btn btn-primary', 'classInput': 'form-control file-input-button', 'classIcon': 'icon-folder-open' }; $.fn.filestyle.noConflict = function () { $.fn.filestyle = old; return this; }; // Data atsortingbutes register $('.filestyle').each(function () { var $this = $(this), options = { 'buttonText': $this.attr('data-buttonText'), 'input': $this.attr('data-input') === 'false' ? false : true, 'icon': $this.attr('data-icon') === 'false' ? false : true, 'classButton': $this.attr('data-classButton'), 'classInput': $this.attr('data-classInput'), 'classIcon': $this.attr('data-classIcon') }; $this.filestyle(options); }); })(window.jQuery);

J’ai modifié @claviska answer et fonctionne comme je le souhaite (Bootstrap 3, 4 non testé):

  

entrer la description de l'image ici

Le code suivant fait comme ci-dessus l’image

Html

 

Javascript

  

Pas de fantaisie nécessaire:

HTML:

 




JS:

 $('.image-file-button').each(function() { $(this).off('click').on('click', function() { $(this).siblings('.image-file').sortinggger('click'); }); }); $('.image-file').each(function() { $(this).change(function () { $(this).siblings('.image-file-chosen').val(this.files[0].name); }); }); 

ATTENTION: Les trois éléments de formulaire en question DOIVENT être frères et sœurs (.image-fichier-choisi, bouton-image-fichier, fichier-image)

J’ai le même problème et je l’essaie comme ça.

 

Le CSS

  

Le JS

  

Remarque: Le bouton .btn-file doit figurer dans la même balise que le fichier d’entrée

J’espère que vous avez trouvé la meilleure solution …

Essayez de suivre dans le bootstrap v.3.3.4

 
Select a file...

Voici un autre truc, ce n’est pas la meilleure solution mais ça vous donne juste le choix

Code HTML:

   

Javascript:

 $("#btn_upload").click(function(e){ e.preventDefault(); $("#fileupload").sortinggger('click'); }); 

En ce qui concerne la réponse claviska – si vous souhaitez afficher le nom du fichier téléchargé dans un téléchargement de fichier de base, vous pouvez le faire dans l’événement onchange des entrées. Utilisez simplement ce code:

   

Ce code jquery JS est responsable de la récupération du nom du fichier téléchargé:

 $('#file-upload')[0].value 

Ou avec la vanille JS:

 document.getElementById("file-upload").value 

Exemple