Warum gibt es für Twitter-Bootstrap keine ausgefallene Schaltfläche zum Hochladen von Dateielementen? Es wäre süß, wenn der blaue Primärknopf für den Upload-Knopf implementiert wäre. Ist es überhaupt möglich, den Upload-Button mit CSS zu verfeinern? (scheint ein natives Browserelement zu sein, das nicht manipuliert werden kann)

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

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

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

Diese Technik basiert auf dem HTML5- hiddenAttribut. Bootstrap 4 verwendet das folgende CSS, um diese Funktion in nicht unterstützenden Browsern zu optimieren. Möglicherweise müssen Sie hinzufügen, wenn Sie Bootstrap 3 verwenden.

[hidden] {
  display: none !important;
}

Legacy-Ansatz für alten IE

Wenn Sie Unterstützung für IE8 und niedriger benötigen, verwenden Sie das folgende 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;
}

Beachten Sie, dass alte IE die Datei nicht Eingang auslöst , wenn Sie auf einen Klick <label>, so das die CSS „aufblasen“ macht ein paar Dinge zu umgehen , dass:

• Legt fest, dass die Dateieingabe die gesamte Breite / Höhe der Umgebung umfasst <span>
• Macht die Dateieingabe unsichtbar

Feedback & zusätzliche Lektüre

Ich habe weitere Details zu dieser Methode sowie Beispiele veröffentlicht, wie dem Benutzer angezeigt werden kann, welche / wie viele Dateien ausgewählt sind:

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

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

Lösung:

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

Keine Notwendigkeit für JS oder funky CSS ...

Lösung zum Einfügen des Dateinamens:

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

Die obige Lösung erfordert jQuery.

Da kein zusätzliches Plugin erforderlich ist, funktioniert diese Bootstrap-Lösung hervorragend für mich:

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

Demo:

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

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

Es ist in Jasnys Bootstrap-Gabel enthalten.

Eine einfache Upload-Schaltfläche kann mit erstellt werden

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

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

Das Hochladen von Schaltflächen ist schwierig zu gestalten, da die Eingabe und nicht die Schaltfläche formatiert werden.

aber Sie können diesen Trick verwenden:

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

Zusammenfassung:

1. Nehmen Sie ein normales <input type="file">und setzen Sie es in ein Element mit position: relative.

2. Fügen Sie demselben übergeordneten Element ein normales <input>und ein Bild hinzu, die die richtigen Stile haben. Positionieren Sie diese Elemente absolut so, dass sie den gleichen Platz einnehmen wie die <input type="file">.

3. Stellen Sie den Z-Index von <input type="file">auf 2 so ein, dass er über dem gestalteten Eingang / Bild liegt.

4. Stellen Sie abschließend die Deckkraft von <input type="file">auf 0 ein. Das wird <input type="file">nun effektiv unsichtbar und die Stileingabe / das Bild leuchtet durch, aber Sie können trotzdem auf die Schaltfläche "Durchsuchen" klicken. Wenn sich die Schaltfläche über dem Bild befindet, scheint der Benutzer auf das Bild zu klicken und das normale Dateiauswahlfenster aufzurufen. (Beachten Sie, dass Sie Sichtbarkeit nicht verwenden können: versteckt, da ein wirklich unsichtbares Element ebenfalls nicht anklickbar ist und wir das Element benötigen, um anklickbar zu bleiben.)

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

Vereinfachte Antwort unter Verwendung von 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 erfasst.
• Kein zusätzliches CSS außer "display: none;" um die Dateieingabe auszublenden.
• Die sichtbare Schaltfläche löst ein Klickereignis für die Eingabe versteckter Dateien aus.
• split Zum Entfernen des Dateipfads werden Regex und Trennzeichen '\' und '/' verwendet.

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>

Mit einigen Inspirationen aus anderen oben genannten Beiträgen finden Sie hier eine vollständige Lösung, die ein Formularsteuerungsfeld mit einem Eingabegruppen-Addon für ein sauberes Dateieingabe-Widget kombiniert, das einen Link 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; }

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

Das funktioniert perfekt für mich

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

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

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

Eine einfache Lösung mit akzeptablem Ergebnis:

<input type="file" class="form-control">

Und der Stil:

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

Lösung für mehrere Uploads

Ich habe zwei vorherige Antworten so angepasst, dass sie mehrere Uploads enthalten. Auf diese Weise zeigt das Etikett den Dateinamen an, wenn nur einer ausgewählt ist, oder x filesim umgekehrten Fall.

<label class="btn btn-primary" for="my-file-selector">
    <input id="my-file-selector" type="file" multiple="multiple" style="display:none"
        onchange="$('#upload-file-info').html(
            (this.files.length > 1) ? this.files.length + ' files' : this.files[0].name)">                     
    Files&hellip;
</label>
<span class='label label-info' id="upload-file-info"></span>

Dies kann auch zum Ändern des Schaltflächentextes und der Klasse gelten.

<label class="btn btn-primary" for="multfile">
    <input id="multfile" type="file" multiple="multiple" style="display:none"
        onchange="$('#multfile-label').html(
            (this.files.length == 1) ? this.files[0].name : this.files.length + ' files');
            $(this).parent().addClass('btn-success')">
    <span id="multfile-label">Files&hellip;</span>
</label>

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

<center>
 <br />
 <br />
 <span class="head">Upload Button Re-Imagined</span>
 <br />
 <br />
 <div class="fileUpload blue-btn btn width100">
   <span>Upload your Organizations logo</span>
   <input type="file" class="uploadlogo" />
 </div>
</center>

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 Stil zum Hochladen von Dateien, den ich mag:

<div class="fileupload fileupload-new" data-provides="fileupload">
  <div class="input-append">
    <div class="uneditable-input span3"><i class="icon-file fileupload-exists"></i> <span class="fileupload-preview"></span></div><span class="btn btn-file"><span class="fileupload-new">Select file</span><span class="fileupload-exists">Change</span><input type="file" /></span><a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
  </div>
</div>

Sie können Demo und mehr Stile erhalten bei:

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

Aber wenn Sie dies verwenden, sollten Sie Twitter Bootstrap durch Jasny Bootstrap-Dateien ersetzen.

Grüße.

Basierend auf der absolut brillanten @laviska-Lösung, der der gesamte Kredit geschuldet wird.

Voll funktionsfähige Bootstrap 4-Dateieingabe mit Validierung und Hilfetext.

Basierend auf dem Beispiel einer Eingabegruppe haben wir ein Dummy-Eingabetextfeld, das zum Anzeigen des Dateinamens für den Benutzer verwendet wird und das vom onchangeEreignis in das tatsächliche Eingabedateifeld eingetragen wird, das hinter der Beschriftungsschaltfläche versteckt ist. Abgesehen von der Unterstützung der Bootstrap 4-Validierung haben wir es auch möglich gemacht, auf eine beliebige Stelle auf die Eingabe zu klicken, um den Dateidialog zu öffnen.

Drei Zustände der Dateieingabe

Die drei möglichen Zustände sind nicht validiert, gültig und ungültig, wenn der Attributsatz requiredfür das Dummy-HTML-Eingabe-Tag festgelegt ist.

HTML-Markup für die Eingabe

Wir führen nur 2 benutzerdefinierte Klassen ein, um das gewünschte Verhalten richtig zu formatieren input-file-dummyund input-file-btnzu verkabeln. Alles andere ist Standard Bootstrap 4 Markup.

<div class="input-group">
  <input type="text" class="form-control input-file-dummy" placeholder="Choose file" aria-describedby="fileHelp" required>
  <div class="valid-feedback order-last">File is valid</div>
  <div class="invalid-feedback order-last">File is required</div>
  <label class="input-group-append mb-0">
    <span class="btn btn-primary input-file-btn">
      Browse… <input type="file" hidden>
    </span>
  </label>
</div>
<small id="fileHelp" class="form-text text-muted">Choose any file you like</small>

Verhaltensbestimmungen für JavaScript

Die Dummy-Eingabe muss gemäß dem ursprünglichen Beispiel schreibgeschützt sein, um zu verhindern, dass der Benutzer die Eingabe ändert, die nur über den Dialog zum Öffnen von Dateien geändert werden kann. Leider findet keine Validierung für readonlyFelder statt, daher schalten wir die Bearbeitbarkeit der Eingabe auf Fokus und Unschärfe ( jquery events onfocusin und onfocusout) um und stellen sicher, dass sie nach Auswahl einer Datei wieder validierbar wird.

Abgesehen davon, dass das Textfeld durch Klicken des Klickereignisses der Schaltfläche anklickbar gemacht wurde, wurde der Rest der Funktionalität zum Auffüllen des Dummy-Felds von @claviska ins Auge gefasst.

$(function () {
  $('.input-file-dummy').each(function () {
    $($(this).parent().find('.input-file-btn input')).on('change', {dummy: this}, function(ev) {
      $(ev.data.dummy)
        .val($(this).val().replace(/\\/g, '/').replace(/.*\//, ''))
        .trigger('focusout');
    });
    $(this).on('focusin', function () {
        $(this).attr('readonly', '');
      }).on('focusout', function () {
        $(this).removeAttr('readonly');
      }).on('click', function () {
        $(this).parent().find('.input-file-btn').click();
      });
  });
});

Benutzerdefinierte Stiländerungen

Am wichtigsten ist, dass das readonlyFeld nicht zwischen grauem und weißem Hintergrund wechselt, damit es weiß bleibt. Die Span-Schaltfläche hat keinen Zeigercursor, aber wir müssen trotzdem einen für die Eingabe hinzufügen.

.input-file-dummy, .input-file-btn {
  cursor: pointer;
}
.input-file-dummy[readonly] {
  background-color: white;
}

nJoy!

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

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

oder

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

/ * * Bootstrap 3-Dateistil * http://dev.tudosobreweb.com.br/bootstrap-filestyle/ * * Copyright (c) 2013 Markus Vinicius da Silva Lima * Bootstrap 3 von Paulo Henrique Foxer aktualisieren * 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 '<i class="'+colorIcon+this.options.classIcon+'"></i> ';
        } else {
            return '';
        }
    },

    htmlInput: function () {
        if (this.options.input) {
            return '<input type="text" class="'+this.options.classInput+'" style="width: '+this.options.inputWidthPorcent+'% !important;display: inline !important;" disabled> ';
        } 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()+
             '<label for="'+id+'" class="'+this.options.classButton+'">'+
                this.htmlIcon()+
                '<span>'+this.options.buttonText+'</span>'+
             '</label>';

        this.$elementFilestyle = $('<div class="bootstrap-filestyle" style="display: inline;">'+html+'</div>');

        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 habe die Antwort von @claviska geändert und arbeite wie ich möchte (Bootstrap 3, 4 nicht getestet):

<label class="btn btn-default">
    <span>Browse</span>
    <input type="file" style="display: none;" onchange="$(this).prev('span').text($(this).val()!=''?$(this).val():'Browse')">
</label>

Der folgende Code macht wie oben das Bild

Html

<form>
<div class="row">
<div class="col-lg-6">
<label for="file">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Browse</button>
</span>
<input type="text" class="form-control" id="info" readonly="" style="background: #fff;" placeholder="Search for...">
</div><!-- /input-group -->
</label>
</div><!-- /.col-lg-6 -->
</div>

</div>
<input type="file" style="display: none;" onchange="$('#info').val($(this).val().split(/[\\|/]/).pop()); " name="file" id="file">
</form>

Javascript

<script type="text/javascript">

$(function() {
    $("label[for=file]").click(function(event) {
        event.preventDefault();
        $("#file").click();
    });
});

</script>

Ich habe das gleiche Problem und ich versuche es so.

<div>
<button type='button' class='btn btn-info btn-file'>Browse</button>
<input type='file' name='image'/>
</div>

Das CSS

<style>
.btn-file {
    position:absolute;
}
</style>

Die JS

<script>
$(document).ready(function(){
    $('.btn-file').click(function(){
        $('input[name="image"]').click();
    });
});
</script>

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

Ich hoffe, Sie haben die beste Lösung gefunden ...

Versuchen Sie, im Bootstrap v.3.3.4 zu folgen

<div>
    <input id="uplFile" type="file" style="display: none;">

    <div class="input-group" style="width: 300px;">
        <div  id="btnBrowse"  class="btn btn-default input-group-addon">Select a file...</div>
        <span id="photoCover" class="form-control">
    </div>
</div>

<script type="text/javascript">
    $('#uplFile').change(function() {
        $('#photoCover').text($(this).val());
    });

    $('#btnBrowse').click(function(){
        $('#uplFile').click();
    });
</script>

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

HTML Quelltext:

<button clss="btn btn-primary" id="btn_upload">Choose File</button>
<input id="fileupload" class="hide" type="file" name="files[]">

Javascript:

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

In Bezug auf die Claviska-Antwort: Wenn Sie den Namen der hochgeladenen Datei in einem einfachen Datei-Upload anzeigen möchten, können Sie dies im onchangeEreignis " Eingaben" tun . Verwenden Sie einfach diesen Code:

 <label class="btn btn-default">
                    Browse...
                    <span id="uploaded-file-name" style="font-style: italic"></span>
                    <input id="file-upload" type="file" name="file"
                           onchange="$('#uploaded-file-name').text($('#file-upload')[0].value);" hidden>
 </label>

Dieser JSQ-Code von jquery ist dafür verantwortlich, den hochgeladenen Dateinamen abzurufen:

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

Oder mit Vanille JS:

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

Ich dachte, ich würde meinen Wert von drei Pence hinzufügen, nur um zu sagen, wie die Standard- .custom-file-labelund custom-file-inputBS4-Dateieingabe verwendet wird und wie diese verwendet werden kann.

Die letztere Klasse befindet sich in der Eingabegruppe und ist nicht sichtbar. Während ersteres die sichtbare Bezeichnung ist und ein: after-Pseudoelement hat, das wie eine Schaltfläche aussieht.

<div class="custom-file">
<input type="file" class="custom-file-input" id="upload">
<label class="custom-file-label" for="upload">Choose file</label>
</div>

Sie können Pseudoelementen keine Klassen hinzufügen, aber Sie können sie in CSS (oder SASS) formatieren.

.custom-file-label:after {
    color: #fff;
    background-color: #1e7e34;
    border-color: #1c7430;
    pointer: cursor;
}

Kein ausgefallenes Shiz erforderlich:

HTML:

<form method="post" action="/api/admin/image" enctype="multipart/form-data">
    <input type="hidden" name="url" value="<%= boxes[i].url %>" />
    <input class="image-file-chosen" type="text" />
    <br />
    <input class="btn image-file-button" value="Choose Image" />
    <input class="image-file hide" type="file" name="image"/> <!-- Hidden -->
    <br />
    <br />
    <input class="btn" type="submit" name="image" value="Upload" />
    <br />
</form>

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

VORSICHT: Die drei fraglichen Formularelemente MÜSSEN Geschwister voneinander sein (ausgewählte Bilddatei, Bilddateischaltfläche, Bilddatei).

http://markusslima.github.io/bootstrap-filestyle/

$(":file").filestyle();

ODER

<input type="file" class="filestyle" data-input="false">