Twitter Bootstrap-Formular Dateielement-Upload-Schaltfläche

Warum gibt es keinen schicken Dateielement-Upload-Button für Twitter-Bootstrap? Es wäre süss, wenn die blaue Primärschaltfläche für die Upload-Schaltfläche implementiert wäre. Ist es sogar möglich, den Upload-Button mit CSS zu verfeinern? (scheint wie ein natives Browserelement zu sein, das nicht manipuliert werden kann)

Solutions Collecting From Web of "Twitter Bootstrap-Formular Dateielement-Upload-Schaltfläche"

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

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

HTML

 

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

Diese Technik beruht auf dem hidden HTML5-Attribut. Bootstrap 4 verwendet das folgende CSS, um dieses Feature in nicht unterstützenden Browsern zu unterstützen. Sie müssen möglicherweise hinzufügen, wenn Sie Bootstrap 3 verwenden.

 [hidden] { display: none !important; } 

Legacy-Ansatz für alte IE

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

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

Beachten Sie, dass der alte IE die Dateieingabe nicht austriggers, wenn Sie auf ein klicken, so dass das CSS “bloat” einige Dinge umgeht, mit denen es zu tun hat:

  • Macht die Dateieingabe über die gesamte Breite / Höhe der umgebenden
  • Macht die Dateieingabe unsichtbar

Rückmeldung und zusätzliches Lesen

Ich habe weitere Details zu dieser Methode gepostet, sowie Beispiele, wie man dem Benutzer zeigt, welche / wie viele Dateien ausgewählt sind:

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

Ich bin überrascht, dass das Element nicht erwähnt wurde.

Lösung:

  

Keine Notwendigkeit für irgendein JS oder funky css …

Lösung für die Aufnahme des Dateinamens:

   

Die obige Lösung erfordert jQuery.

Ohne zusätzliche Plugins funktioniert diese Bootstrap-Lösung für mich:

  

Demo:

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

Bildbeschreibung hier eingeben

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

Bildbeschreibung hier eingeben

Es ist in Jasnys Fork von Bootstrap enthalten.

Eine einfache Upload-Schaltfläche kann mit erstellt werden

 Upload 

Mit dem Fileupload-Plugin können Sie erweiterte Widgets erstellen. Sehen Sie sich http://jasny.github.io/bootstrap/javascript/#fileinput an

Das Hochladen von Schaltflächen ist mühsam, da die Eingabe und nicht die Schaltfläche formatiert wird.

aber Sie können diesen Trick verwenden:

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

Zusammenfassung:

  1. Nimm einen normalen und lege ihn in ein Element mit position: relative .

  2. Fügen Sie zu demselben übergeordneten Element ein normales und ein image hinzu, die die richtigen Stile haben. Positioniere diese Elemente absolut, so dass sie den gleichen Platz einnehmen wie der .

  3. Setzen Sie den Z-Index des auf 2, sodass er über dem formatierten Eingang / Bild liegt.

  4. Setzen Sie schließlich die Deckkraft von auf 0. Der nun praktisch unsichtbar und die Styles Eingabe / Bild leuchtet durch, aber Sie können immer noch auf “Durchsuchen” klicken ” Taste. 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 Sichtbarkeit nicht verwenden können: Versteckt, weil ein wirklich unsichtbares Element auch nichtklickbar ist und wir müssen klickbar bleiben)

functioniert bei mir:

  • Hübsches Dateieingabefeld in Bootstrap

Aktualisieren

jQuery-Plugin-Stil :

 // 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 );

Vereinfachte Antwort mit Teilen aus anderen Antworten, hauptsächlich user2309766 und dotcomsuperstar.

Eigenschaften:

  • Verwendet das Bootstrap-Button-Addon für Button und Feld.
  • Nur eine Eingabe; Mehrere Eingaben würden von einem Formular übernommen.
  • Kein zusätzliches CSS außer “display: none;” um die Dateieingabe zu verbergen.
  • Die Schaltfläche “Visible” triggers ein Klickereignis für die Eingabe versteckter Dateien aus.
  • split , um den Dateipfad zu entfernen, verwendet Regex und Delimiter ‘\’ und ‘/’.

Code:

    
Browse

Mit ein wenig Inspiration aus anderen obigen Beiträgen erhalten Sie hier eine vollständige Lösung, die ein Formularsteuerungsfeld mit einem Eingabegruppen-Addon für ein sauberes Dateieingabe-Widget kombiniert, das eine Verknüpfung zur aktuellen Datei enthält.

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

Das funktioniert perfekt für mich

          

Bitte überprüfen Sie die Bootstrap-Dateieingabe von Twitter . Es verwendet eine sehr einfache Lösung, fügen Sie einfach eine Javascript-Datei hinzu und fügen Sie folgenden Code ein:

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

Eine einfache Lösung mit akzeptablem Ergebnis:

  

Und der Stil:

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

Ich habe eine benutzerdefinierte Upload-Schaltfläche erstellt, um nur Bilder zu akzeptieren, die gemäß Ihren Anforderungen geändert werden können.

Hoffe das hilft!! 🙂

(Verwendetes Bootstrap-Framework)

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.substring(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!'); } } }); 

Dies ist der beste Datei-Upload-Stil, den ich mag:

 
Select fileChangeRemove

Sie können Demo und mehr Stile an erhalten:

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

Aber mit diesem sollten Sie Twitter Bootstrap durch Jasny Bootstrap-Dateien ersetzen.

Grüße.

/ * * Bootstrap 3 Dateityp * http://dev.tudosobreweb.com.br/bootstrap-filestyle/ * * Copyright (c) 2013 Markus Vinicius von Silva Lima * Update bootstrap 3 von Paulo Henrique Foxer * Version 2.0.0 * Lizenziert unter der MIT-Lizenz. * * /

 (function ($) { "use strict"; 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 === 'string') { 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 attributes 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);

Ich benutze http://gregpike.net/demos/bootstrap-file-input/demo.html :

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

oder

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

Lösung für mehrere Uploads

Ich habe zwei vorherige Antworten optimiert, um mehrere Uploads einzubeziehen. Auf diese Weise zeigt das Etikett den Dateinamen, wenn nur einer ausgewählt ist, oder x files im umgekehrten Fall.

   

Bildbeschreibung hier eingeben

Es kann auch angewendet werden, um den Text und die class der Schaltfläche zu ändern.

  

Bildbeschreibung hier eingeben

Ich habe @claviska Antwort geändert und funktioniert so, wie ich es mag (Bootstrap 3, 4 nicht getestet):

  

Bildbeschreibung hier eingeben

Der folgende Code macht wie oben das Bild

Html

 

Javascript

  

Kein schickes Shiz erforderlich:

HTML:

 




JS:

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

ACHTUNG: Die drei Formularelemente MÜSSEN Geschwister zueinander sein (.image-file-selected, .image-file-button, .image-Datei)

Ich habe das gleiche Problem, und ich versuche es so.

 

Das CSS

  

Das JS

  

Hinweis: Die Schaltfläche .btn-Datei muss sich im selben Tag wie die Eingabedatei befinden

Hoffe, du hast die beste Lösung gefunden …

Versuchen Sie es im Bootstrap v.3.3.4

 
Select a file...

Hier ist alternative Trick, es ist nicht die beste Lösung, aber es gibt Ihnen nur eine Wahl

HTML Quelltext:

   

Javascript:

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

In Bezug auf Claviska Antwort – wenn Sie hochgeladenen Dateinamen in einem einfachen Datei-Upload zeigen möchten, können Sie dies in onchange Ereignis Eingaben onchange . Benutze einfach diesen Code:

   

Dieser jquery JS-Code ist dafür verantwortlich, den hochgeladenen Dateinamen zu erhalten:

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

Oder mit Vanille JS:

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

Beispiel