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; }
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:
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)
http://jsfiddle.net/haisumbhatti/y3xyU/ (bootstrap 3)
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é:
Prenez un normal et placez-le dans un élément avec
position: relative
.
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
.
Définissez l’index z du sur 2 pour qu’il se trouve au-dessus de l’entrée / de l’image stylée.
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:
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:
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:
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();
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.
Cela peut aussi s’appliquer pour changer le texte du bouton et la classe.
/ * * 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é):
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