Neden twitter bootstrap için süslü bir dosya öğesi yükleme düğmesi yok? Karşıya yükleme düğmesi için mavi birincil düğmenin uygulanması tatlı olacaktır. Yükleme düğmesini CSS kullanarak daha da güzelleştirmek mümkün mü? (değiştirilemeyen yerel bir tarayıcı öğesi gibi görünüyor)

İşte Bootstrap 3 ve 4 için bir çözüm.

Düğme gibi görünen işlevsel bir dosya giriş denetimi yapmak için yalnızca HTML'ye ihtiyacınız vardır:

HTML

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

Bu, IE9 + dahil tüm modern tarayıcılarda çalışır. Eski IE için de desteğe ihtiyacınız varsa, lütfen aşağıda gösterilen eski yaklaşımı kullanın.

Bu teknikler HTML5 hiddenözelliğine dayanır . Bootstrap 4, destekleyici olmayan tarayıcılarda bu özelliği göstermek için aşağıdaki CSS'yi kullanır. Bootstrap 3 kullanıyorsanız eklemeniz gerekebilir.

[hidden] {
  display: none !important;
}

Eski IE için eski yaklaşım

IE8 ve aşağısı için desteğe ihtiyacınız varsa, aşağıdaki HTML / CSS'yi kullanın:

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

Eski <label>IE'nin a'yı tıklattığınızda dosya girişini tetiklemediğine dikkat edin , bu nedenle CSS "şişmesi" bunun etrafında çalışmak için birkaç şey yapar:

• Dosya girişini çevrenin tam genişliğini / yüksekliğini kapsar <span>
• Dosya girişini görünmez yapar

Geribildirim ve Ek Okuma

Bu yöntem hakkında daha fazla ayrıntı ve kullanıcıya hangi / kaç dosyanın seçildiğini gösterme örnekleri gönderdim:

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

<label>Eleman hiçbir söz yoktu şaşırdım .

Çözüm:

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

Herhangi bir JS veya funky css gerek yok ...

Dosya adını eklemek için çözüm:

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

Yukarıdaki çözüm jQuery gerektirir.

Ek bir eklenti gerekmeden, bu bootstrap çözümü benim için harika çalışıyor:

<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/ (önyükleme 2)

http://jsfiddle.net/haisumbhatti/y3xyU/ (önyükleme 3)

Jasny'nin bootstrap çatalına dahildir.

Basit bir yükleme düğmesi kullanılarak oluşturulabilir

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

Fileupload eklentisi ile daha gelişmiş widget'lar oluşturabilirsiniz. Http://jasny.github.io/bootstrap/javascript/#fileinput adresine bir göz atın

Yükleme düğmeleri, düğmeyi değil girişi biçimlendirdiği için stil için bir acıdır.

ancak bu numarayı kullanabilirsiniz:

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

Özet:

1. Normal alın <input type="file">ve ile bir elemente koyun position: relative.

2. Aynı ana öğeye, <input>doğru stillere sahip bir normal ve bir görüntü ekleyin . Bu öğeleri kesinlikle konumlandırın, böylece ile aynı yeri işgal etsinler <input type="file">.

3. <input type="file">Biçimlendirilmiş giriş / görüntünün üstünde olacak şekilde , z-dizinini 2 olarak ayarlayın .

4. Son olarak, opaklığını <input type="file">0 olarak ayarlayın. <input type="file">Şimdi etkili bir şekilde görünmez olur ve giriş / görüntü stilleri parlar, ancak yine de "Gözat" düğmesine tıklayabilirsiniz. Düğme görüntünün üstüne yerleştirilirse, kullanıcı görüntüyü tıklar ve normal dosya seçme penceresini alır. (Görünürlüğü kullanamayacağınızı unutmayın: gizli, çünkü gerçekten görünmez bir öğe de tıklanamaz ve tıklanabilir kalmamız gerekiyor)

Benim için çalışıyor:

• Bootstrap'taki güzel dosya giriş alanı

Güncelleme

jQuery eklenti tarzı :

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

Öncelikle user2309766 ve dotcomsuperstar olmak üzere diğer yanıtlardan parçalar kullanılarak basitleştirilmiş yanıt.

Özellikleri:

• Düğme ve alan için Bootstrap düğmesi eklentisini kullanır.
• Sadece bir giriş; birden çok girdi bir form tarafından alınır.
• "Display: none;" dışında ekstra css yok dosya girişini gizlemek için.
• Görünür düğme gizli dosya girişi için tıklama olayını tetikler.
• split dosya yolunu kaldırmak için normal ifade ve '\' ve '/' sınırlayıcılarını kullanır.

Kod:

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

Yukarıdaki diğer yayınlardan biraz ilham alarak, mevcut dosyaya bağlantı içeren temiz bir dosya girdi widget'ı için bir form kontrol alanına benzeyen bir girdi-grup-addonu ile birleştiren tam bir çözüm.

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

Bu benim için mükemmel çalışıyor

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

Lütfen Twitter Bootstrap Dosya Girişi'ne bakın . Çok basit bir çözüm kullanır, sadece bir javascript dosyası ekleyin ve aşağıdaki kodu yapıştırın:

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

Kabul edilebilir sonuç ile basit bir çözüm:

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

Ve stil:

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

Çoklu yükleme için çözüm

Birden fazla yükleme eklemek için önceki iki yanıtı değiştirdim. Bu şekilde etiket, yalnızca bir tane seçildiyse veya x filestersi durumda dosya adını gösterir .

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

Düğme metnini ve sınıfını değiştirmek için de geçerli olabilir.

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

Yalnızca gereksinimlerinize göre değiştirilebilen resimleri kabul etmek için bir Özel yükleme düğmesi oluşturdum.

Bu yardımcı olur umarım!! :)

(Kullanılmış Bootstrap çerçevesi)

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

Bu benim gibi en iyi dosya yükleme tarzı:

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

demo ve daha fazla stil alabilirsiniz:

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

ama bunu kullanarak, twitter bootstrap'ı jasny bootstrap dosyalarıyla değiştirmelisiniz.

Saygılarımızla.

Tüm kredinin borçlu olduğu kesinlikle parlak @claviska çözümüne dayanmaktadır.

Doğrulama ve yardım metni içeren tam özellikli Bootstrap 4 dosya girişi.

Giriş grubu örneğine dayanarak , dosya adını görüntülemek için kullanılan onchange, etiket düğmesinin arkasında gizlenmiş gerçek giriş dosyası alanındaki olaydan doldurulan bir sahte giriş metin alanına sahibiz . Bootstrap 4 doğrulama desteğinin yanı sıra , dosya iletişim kutusunu açmak için girişin herhangi bir yerine tıklamayı da mümkün kıldık.

Dosya girişinin üç durumu

Üç olası durum doğrulanmamış, geçerli ve geçersiz kukla html giriş etiketi öznitelik requiredseti ile geçersizdir .

Giriş için HTML işaretlemesi

Biz sadece 2 özel sınıflarını tanıtmak input-file-dummyve input-file-btndüzgün stiline ve istenilen davranışı tel. Diğer her şey standart Bootstrap 4 işaretlemesidir.

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

JavaScript davranışsal hükümleri

Kullanıcının yalnızca açık dosya iletişim kutusu aracılığıyla değiştirilebilecek girişi değiştirmesini önlemek için orijinal örneğe göre sahte girişin salt okunur olması gerekir. Maalesef readonlyalanlarda doğrulama yapılmadığından , odak ve bulanıklaştırma ( jquery olayları onfocusin ve onfocusout) girişinin düzenlenebilirliğini değiştiririz ve bir dosya seçildikten sonra tekrar doğrulanabilir olmasını sağlarız.

Metin alanını tıklanabilir hale getirmenin yanı sıra, düğmenin tıklama etkinliğini tetikleyerek, kukla alanı doldurma işlevinin geri kalanı @claviska tarafından tasarlandı.

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

Özel stil ayarları

En önemlisi, readonlyalanın gri arkaplan ve beyaz arasında atlamasını istemiyoruz, böylece beyaz kalmasını sağlıyoruz. Span düğmesinin işaretçi imleci yok ancak yine de giriş için bir tane eklememiz gerekiyor.

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

Njoy!

Kullandığım http://gregpike.net/demos/bootstrap-file-input/demo.html :

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

veya

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

/ * * Bootstrap 3 filestyle * http://dev.tudosobreweb.com.br/bootstrap-filestyle/ * * Telif Hakkı (c) 2013 Markus Vinicius da Silva Lima * Paulo Henrique Foxer tarafından bootstrap 3 güncellemesi * Sürüm 2.0.0 * Lisanslı MIT lisansı altında. * * /

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

@Claviska cevabını değiştirdim ve istediğim gibi çalışıyor (Bootstrap 3, 4 test edilmedi):

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

Aşağıdaki kod resmin üzerinde olduğu gibi yapar

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>

Aynı problemim var ve böyle deniyorum.

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

CSS

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

JS

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

Not: .btn dosyası düğmesi giriş dosyasıyla aynı etikette olmalıdır

Umarım en iyi çözümü bulmuşsundur ...

Bootstrap v.3.3.4'te deneyin

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

İşte alternatif hile, en iyi çözüm değil ama size bir seçenek sunuyor

HTML Kodu:

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

Claviska yanıtı ile ilgili olarak - yüklenen dosya adını temel bir dosya yüklemesinde göstermek istiyorsanız bunu girişlerin onchangeetkinliğinde yapabilirsiniz. Sadece bu kodu kullanın:

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

Bu jquery JS kodu yüklenen dosya adını almaktan sorumludur:

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

Veya vanilya JS ile:

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

Ben sadece varsayılan .custom-file-labelve custom-file-inputBS4 dosya girişi ve nasıl kullanılabilir söylemek için, benim üçlü değer eklemek olacağını düşündüm .

İkinci sınıf giriş grubundadır ve görünmez. Birincisi görünür etiket ve bir: benzeyen bir düğme gibi görünen: sonra sözde.

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

Psuedoelements'a sınıf ekleyemezsiniz, ancak bunları CSS'de (veya SASS) biçimlendirebilirsiniz.

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

Fantezi shiz gerekmez:

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

DİKKAT: Söz konusu üç form öğesi birbirlerinin kardeşleri OLMALIDIR (.image-file-select, .image-file-button, .image-file)

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

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

VEYA

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