Tombol Boot Boot Elemen File Form Twitter


Jawaban:


972

Inilah solusi untuk Bootstrap 3 dan 4.

Untuk membuat kontrol input file fungsional yang terlihat seperti tombol, Anda hanya perlu HTML:

HTML

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

Ini berfungsi di semua browser modern, termasuk IE9 +. Jika Anda juga memerlukan dukungan untuk IE lama, silakan gunakan pendekatan lawas yang ditunjukkan di bawah ini.

Teknik ini bergantung pada hiddenatribut HTML5 . Bootstrap 4 menggunakan CSS berikut untuk mengecilkan fitur ini di browser yang tidak mendukung. Anda mungkin perlu menambahkan jika Anda menggunakan Bootstrap 3.

[hidden] {
  display: none !important;
}

Pendekatan lama untuk IE lama

Jika Anda memerlukan dukungan untuk IE8 dan di bawah, gunakan HTML / CSS berikut:

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

Perhatikan bahwa IE lama tidak memicu input file ketika Anda mengklik a <label>, sehingga CSS "mengasapi" melakukan beberapa hal untuk mengatasinya:

  • Membuat input file span lebar penuh / tinggi sekitarnya <span>
  • Membuat input file tidak terlihat

Umpan Balik & Bacaan Tambahan

Saya telah memposting rincian lebih lanjut tentang metode ini, serta contoh-contoh bagaimana menunjukkan kepada pengguna mana / berapa banyak file yang dipilih:

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


52
+1 Bagi saya ini adalah jawaban terbaik. Solusi yang sangat ringkas menggunakan versi terbaru dari bootstrap.
Ulises

6
@Ulises @JaredEitnier @IvanWang Saya dengan hormat tidak setuju. Dan menawarkan plug tak tahu malu untuk jawaban saya yang hanya menggunakan <label>elemen. Sebagai solusi terbaik :)
Kirill Fuchs

9
Saya harus setuju dengan @ KirillFuchs; label akan lebih baik. Plus - pengguna tidak dapat melihat apakah mereka memilih file yang tepat karena tombol tidak menunjukkan nama file yang dipilih: jsfiddle.net/36o9pdf9/1
danwild

1
Label akan secara semantik lebih baik. Lihatlah artikel untuk metode menunjukkan file mana yang dipilih. (Beberapa aplikasi mengunggah secara otomatis saat file dipilih, jadi dalam kasus itu umpan balik nama file tidak penting.)
claviska

1
Saya tidak bisa menjalankan ini pada IE11 bersama-sama dengan objek FormData. Entah bagaimana IE mengabaikan bidang input ketika berada di dalam elemen label, dan sebagai hasilnya data file tidak tersedia dari objek FormData.
René

385

Saya kaget tidak disebutkan <label>unsurnya.

Larutan:

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

Tidak perlu untuk JS, atau funky css ...

Solusi untuk memasukkan nama file:

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

Solusi di atas membutuhkan jQuery.


38
Jawaban ini harus diterima. Ini bahkan lebih baik daripada jawaban @ claviska
Fernando Carvalhosa

4
Tidak bisa mengerti mengapa ini bukan jawaban yang diterima. Bersih, sederhana dan stabil (kecuali Anda menargetkan <IE9, yaitu ...)
Jake Foster

3
Saya tidak bisa menjalankan ini pada IE11 bersama-sama dengan objek FormData. Entah bagaimana IE mengabaikan bidang input ketika berada di dalam elemen label, dan sebagai hasilnya data file tidak tersedia dari objek FormData.
René

25
baik, itu tidak menampilkan file mana yang dipilih (
godblessstrawberry

3
Anda tidak perlu menggunakan forjika Anda membungkus elemen target dengan label.
0xcaff

132

Tanpa diperlukan tambahan plugin, solusi bootstrap ini sangat cocok untuk saya:

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

masukkan deskripsi gambar di sini

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

masukkan deskripsi gambar di sini


6
Saya punya beberapa masalah dengan bagian bawah tombol tidak dapat diklik. Jawaban ini membantu saya dalam bootstrap 3: stackoverflow.com/a/18164555/44336
Paul Lemke

3
Ini adalah solusi yang sangat baik karena menunjukkan nama file dari file terlampir!
cb88

2
Bisakah seseorang tolong jelaskan perlunya href = 'javascript :;' ? Saya tidak memerlukan onchange = '$ ("# upload-file-info"). Html ($ (ini) .val ());' untuk memperbarui elemen unggah-file-info, tetapi dialog unggah file tidak akan terpicu tanpa href.
user12121234

2
Di mana 'C: \ fakepath' berasal dan bagaimana cara menyingkirkannya?
Ya

1
@Ya. C: \ fakepath adalah fitur keamanan html5 dan diawali dengan path file jika kita memanipulasinya dengan javascript. Lihat posting blog ini davidwalsh.name/fakepath untuk detailnya.
codefreak

88

Itu termasuk dalam garpu bootstrap Jasny.

Tombol unggah sederhana dapat dibuat menggunakan

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

Dengan plugin fileupload Anda dapat membuat widget yang lebih canggih. Lihatlah http://jasny.github.io/bootstrap/javascript/#fileinput


Apakah ini berfungsi baik di IE9? Saya bertanya karena saya menganggap solusinya menggunakan Javascript, dan, pada saat yang sama, "IE tidak mengizinkan manipulasi elemen input type =" file "dari javascript karena alasan keamanan."
Marek Příhoda

Ya itu bekerja di IE9 juga. Ini mengatur opacity dari elemen input ke 0, yang untungnya bekerja di semua browser :). Itu dijelaskan dalam artikel quirksmode.
Arnold Daniels

1
itu tidak bekerja dengan jQuery 1.9.0, karena mereka menjatuhkan dukungan $ .browser
Giedrius

14
Terlihat mengerikan dengan bootstrap biasa - img688.imageshack.us/img688/948/pictureui.png
cwd

66

Tombol unggah terasa sulit untuk ditata karena gaya input dan bukan tombol.

tetapi Anda dapat menggunakan trik ini:

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

Ringkasan:

  1. Ambil yang normal <input type="file">dan masukkan ke dalam elemen position: relative.

  2. Untuk elemen induk yang sama ini, tambahkan normal <input>dan gambar, yang memiliki gaya yang benar. Posisikan elemen-elemen ini secara mutlak, sehingga mereka menempati tempat yang sama dengan <input type="file">.

  3. Atur z-index dari <input type="file">ke 2 sehingga terletak di atas input / gambar gaya.

  4. Akhirnya, atur opacity dari <input type="file">ke 0. <input type="file">Sekarang menjadi tidak terlihat secara efektif, dan style input / gambar bersinar, tetapi Anda masih dapat mengklik tombol "Browse". Jika tombol diposisikan di atas gambar, pengguna muncul untuk mengklik gambar dan mendapatkan jendela pemilihan file normal. (Perhatikan bahwa Anda tidak dapat menggunakan visibilitas: disembunyikan, karena elemen yang benar-benar tidak terlihat juga tidak dapat diklik, dan kami perlu tetap diklik)


6
Ini terlalu banyak pekerjaan untuk hari ini. Menggunakan sesuatu yang siap seperti solusi Jasny dalam jawaban berikutnya jauh lebih masuk akal.
mgPePe

2
Jika contoh Anda menyertakan dukungan untuk mendukung netscape, itu mungkin tidak terkini.
Typhomism

22

Bekerja untuk saya:

Memperbarui

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

17

Jawaban yang disederhanakan menggunakan bagian dari jawaban lain, terutama user2309766 dan dotcomsuperstar.

Fitur:

  • Menggunakan add-on tombol Bootstrap untuk tombol dan bidang.
  • Hanya satu input; banyak input akan diambil oleh formulir.
  • Tidak ada css tambahan kecuali "display: none;" untuk menyembunyikan input file.
  • Tombol yang terlihat mengaktifkan acara klik untuk input file yang disembunyikan.
  • split untuk menghapus jalur file menggunakan regex dan pembatas '\' dan '/'.

Kode:

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


12

Dengan beberapa inspirasi dari posting lain di atas, berikut ini adalah solusi lengkap yang menggabungkan apa yang tampak seperti bidang kontrol bentuk dengan input-grup-addon untuk widget input file bersih yang menyertakan tautan ke file saat ini.

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


9

Ini bekerja dengan baik untuk saya

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


6

Solusi sederhana dengan hasil yang dapat diterima:

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

Dan gayanya:

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

5

Solusi untuk banyak unggahan

Saya mengubah dua jawaban sebelumnya untuk memasukkan beberapa unggahan. Dengan cara ini label menunjukkan nama file, jika hanya satu yang dipilih, atau x filessebaliknya.

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

masukkan deskripsi gambar di sini

Ini mungkin juga berlaku untuk mengubah teks tombol dan kelas.

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

masukkan deskripsi gambar di sini


4

Saya telah membuat tombol Unggah khusus untuk hanya menerima gambar, yang dapat dimodifikasi sesuai kebutuhan Anda.

Semoga ini membantu!! :)

(Digunakan kerangka kerja Bootstrap)

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

4

ini adalah gaya unggah file terbaik yang saya sukai:

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

Anda bisa mendapatkan demo dan lebih banyak gaya di:

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

tetapi menggunakan ini, Anda harus mengganti bootstrap twitter dengan file bootstrap jasny ..

salam.


4

Berdasarkan solusi @claviska yang benar-benar brilian, kepada siapa semua kredit berhutang.

Input file Bootstrap 4 berfitur lengkap dengan validasi dan teks bantuan.

Berdasarkan contoh grup input, kami memiliki bidang teks input dummy yang digunakan untuk menampilkan nama file kepada pengguna, yang akan diisi dari onchangeperistiwa pada bidang file input aktual yang tersembunyi di balik tombol label. Selain menyertakan dukungan validasi bootstrap 4, kami juga memungkinkan untuk mengklik di mana saja pada input untuk membuka dialog file.

Tiga status dari input file

Tiga kemungkinan status tidak divalidasi, valid, dan tidak valid dengan atribut tag input hummy dummy required set .

masukkan deskripsi gambar di sini

Markup html untuk input

Kami hanya memperkenalkan 2 kelas khusus input-file-dummydaninput-file-btn untuk menata serta menyesuaikan perilaku yang diinginkan dengan benar. Yang lainnya adalah markup Bootstrap 4 standar.

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

Ketentuan perilaku JavaScript

Input dummy hanya perlu dibaca, seperti contoh aslinya, untuk mencegah pengguna mengubah input yang hanya dapat diubah melalui dialog file yang terbuka. Sayangnya validasi tidak terjadi pada readonlybidang sehingga kami mengaktifkan kemampuan edit input pada fokus dan blur ( peristiwa jquery onfocusin danonfocusout ) dan memastikan bahwa itu menjadi sah lagi setelah file dipilih.

Selain juga membuat bidang teks dapat diklik, dengan memicu acara klik tombol, sisa fungsi mengisi bidang dummy dibayangkan oleh @claviska.

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

Tweak gaya kustom

Yang paling penting kami tidak ingin readonlybidang melompat antara latar belakang abu-abu dan putih sehingga kami memastikannya tetap putih. Tombol span tidak memiliki kursor kursor tetapi kita perlu menambahkan satu untuk input.

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

nJoy!



2

/ * * Bootstrap 3 filestyle * http://dev.tudosobreweb.com.br/bootstrap-filestyle/ * * Hak cipta (c) 2013 Markus Vinicius da Silva Lima * Perbarui bootstrap 3 oleh Paulo Henrique Foxer * Versi 2.0.0 * Berlisensi di bawah lisensi MIT. * * /

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

2

Saya memodifikasi jawaban @claviska dan berfungsi sesuka saya (Bootstrap 3, 4 tidak diuji):

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

2

masukkan deskripsi gambar di sini

Kode berikut dibuat seperti gambar di atas

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>

1

Saya memiliki masalah yang sama, dan saya mencobanya seperti ini.

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

Catatan: Tombol .btn-file harus dalam tag yang sama dengan file input

Semoga Anda menemukan solusi terbaik ...


1

Coba ikuti di Bootstrap v.3.3.4

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

1

Ini adalah trik alternatif, ini bukan solusi terbaik tetapi hanya memberi Anda pilihan

Kode HTML:

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

1

Sehubungan dengan jawaban claviska - jika Anda ingin menampilkan nama file yang diunggah dalam unggahan file dasar, Anda dapat melakukannya di onchangeacara masukan . Cukup gunakan kode ini:

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

Kode JS jquery ini bertanggung jawab akan mengambil nama file yang diunggah:

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

Atau dengan vanilla JS:

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

contoh


1

Saya pikir saya akan menambahkan senilai threepence saya, hanya untuk mengatakan bagaimana default .custom-file-labeldan custom-file-inputfile yang BS4 masukan dan bagaimana yang dapat digunakan.

Kelas yang terakhir adalah pada kelompok input dan tidak terlihat. Sedangkan yang pertama adalah label yang terlihat dan memiliki: setelah pseudoelement yang terlihat seperti tombol.

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

Anda tidak bisa menambahkan kelas ke elemen psuedo, tetapi Anda bisa menata mereka dalam CSS (atau SASS).

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

0

Shiz mewah tidak diperlukan:

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

PERHATIAN: Tiga elemen bentuk dalam pertanyaan HARUS bersaudara satu sama lain (.image-file-terpilih, tombol-gambar-file-, -gambar-file)


Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.