web-dev-qa-db-fra.com

Bouton de téléchargement d'élément de fichier de formulaire Twitter Bootstrap

Pourquoi n'y a-t-il pas de bouton de téléchargement d'élément de fichier sophistiqué pour le démarrage de Twitter? Ce serait bien si le bouton principal bleu était implémenté pour le bouton de téléchargement. Est-il même possible d'affiner le bouton de téléchargement en utilisant CSS? (semble être un élément de navigateur natif qui ne peut pas être manipulé) 

cssformstwitter-bootstrapinput-type-file
533
jkushner

Voici une solution pour Bootstrap 3 et 4.

Pour créer un contrôle d'entrée de fichier fonctionnel qui ressemble à un bouton, vous n'avez besoin que de HTML:

HTML

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

Cela fonctionne dans tous les navigateurs modernes, y compris IE9 +. Si vous avez également besoin d’une assistance pour l’ancien IE, veuillez utiliser l’approche classique indiquée ci-dessous.

Cette technique repose sur l'attribut HTML5 hidden. Bootstrap 4 utilise le CSS suivant pour cerner cette fonctionnalité dans les navigateurs non pris en charge. Vous devrez peut-être ajouter si vous utilisez Bootstrap 3.

[hidden] {
  display: none !important;
}

Approche héritée pour l'ancien IE

Si vous avez besoin de support pour IE8 et les versions antérieures, utilisez le code HTML/CSS suivant:

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

Notez que l'ancien IE ne déclenche pas l'entrée du fichier lorsque vous cliquez sur un <label>, aussi le CSS "gonfle-t-il" fait deux choses pour résoudre ce problème:

  • Fait que l’entrée de fichier couvre toute la largeur/hauteur du <span> environnant
  • Rend l'entrée de fichier invisible

Commentaires et lectures supplémentaires

J'ai posté plus de détails sur cette méthode, ainsi que des exemples montrant comment montrer à l'utilisateur quels/combien de fichiers sont sélectionnés:

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

913
claviska

Je suis surpris qu'il n'y ait aucune mention de l'élément <label>.

Solution: 

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

Pas besoin de JS, ni de css funky ...

Solution pour inclure le nom du fichier: 

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

La solution ci-dessus nécessite jQuery.

354
Kirill Fuchs

Sans aucun plugin supplémentaire requis, cette solution de démarrage fonctionne très bien pour moi:

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

démo: 

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

enter image description here

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

enter image description here

130
codefreak

Il est inclus dans la fourche de bootstrap de Jasny.

Un simple bouton de téléchargement peut être créé en utilisant

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

Avec le plugin fileupload, vous pouvez créer des widgets plus avancés. Regardez http://jasny.github.io/bootstrap/javascript/#fileinput

87
Jasny - Arnold Daniels

Les boutons de téléchargement sont difficiles à mettre en forme, car ils mettent en forme l’entrée et non le bouton.

mais vous pouvez utiliser cette astuce:

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

Résumé:

  1. Prenez un <input type="file"> normal et placez-le dans un élément avec position: relative. 

  2. A ce même élément parent, ajoutez un <input> normal et une image ayant les styles appropriés. Positionnez ces éléments de manière absolue, de sorte qu’ils occupent la même place que le <input type="file">. 

  3. Définissez l’index-z du <input type="file"> sur 2 afin qu’il se trouve au-dessus de l’entrée/image stylisée. 

  4. Enfin, définissez l’opacité du <input type="file"> sur 0. Le <input type="file"> devient désormais effectivement invisible et les styles saisis/image transparaissent, mais vous pouvez toujours cliquer sur le bouton "Parcourir". Si le bouton est positionné au-dessus de l'image, l'utilisateur semble cliquer sur l'image pour afficher la fenêtre de sélection de fichier normale. (Notez que vous ne pouvez pas utiliser la visibilité: masqué, car un élément vraiment invisible est également clichable et nous avons besoin de pour rester cliquable)

65
baptme

Travaille pour moi: 

Mettre à jour

style de plugin jQuery :

// Based in: http://duckranger.com/2012/06/pretty-file-input-field-in-bootstrap/
// Version: 0.0.3
// Compatibility with: Bootstrap 3.2.0 and jQuery 2.1.1
// Use:
//     <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 );
21
fguillen

Réponse simplifiée utilisant des éléments d'autres réponses, principalement user2309766 et dotcomsuperstar.

Caractéristiques:

  • Utilise le bouton Bootstrap pour le bouton et le champ.
  • Une seule entrée; plusieurs entrées seraient captées par un formulaire.
  • Pas de css supplémentaire sauf "display: none;" pour masquer l'entrée du fichier.
  • Le bouton visible déclenche un événement clic pour une entrée de fichier cachée.
  • split pour supprimer le chemin du fichier utilise regex et les délimiteurs '\' et '/'.

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>

14
mindriot

Inspirée des publications ci-dessus, voici une solution complète qui combine ce qui ressemble à un champ de contrôle de formulaire avec un addon de groupe d'entrées pour un widget de saisie de fichier propre qui inclut un lien vers le fichier actuel.

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

11
dotcomly

Cela fonctionne parfaitement pour moi

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

S'il vous plaît vérifier Twitter Bootstrap File Input . Il utilise une solution très simple, il suffit d'ajouter un fichier javascript et collez le code suivant:

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

Une solution simple avec un résultat acceptable:

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

Et le style:

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

c'est le meilleur style de téléchargement de fichier que j'aime bien:

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

vous pouvez obtenir une démo et plus de styles sur:

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

mais en utilisant ceci, vous devriez remplacer Twitter bootstrap par des fichiers jasny bootstrap ..

cordialement.

3
navins

J'ai créé un bouton de téléchargement personnalisé pour accepter uniquement les images, qui peuvent être modifiées selon vos besoins.

J'espère que cela t'aides!! :)

(Framework Bootstrap utilisé)

Codepen-link

HTML

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

J'utilise http://gregpike.net/demos/bootstrap-file-input/demo.html :

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

ou

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

Solution pour l'envoi multiple

J'ai modifié deux réponses précédentes pour inclure plusieurs téléchargements. De cette manière, l’étiquette affiche le nom du fichier, si un seul est sélectionné, ou x files dans le cas contraire.

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

 enter image description here

Cela peut également s'appliquer pour changer le texte et la classe du bouton.

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

 enter image description here

2
Nuno André

/* * Bootstrap 3 filestyle * http://dev.tudosobreweb.com.br/bootstrap-filestyle/ * * Copyright (c) 2013 Markus Vinicius da Silva Lima * Mise à jour du bootstrap 3 par Paulo Henrique Foxer * Version 2.0.0 * Licence sous la licence 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
Paulo Henrique Foxer

Basé sur la solution absolument géniale @claviska, à qui tout le crédit est dû.

Entrée complète dans le fichier Bootstrap 4 avec validation et texte d’aide.

Sur la base de exemple de groupe d'entrée , nous avons un champ de texte fictif utilisé pour afficher le nom de fichier à l'utilisateur, qui est renseigné à partir de l'événement onchange dans le champ du fichier d'entrée réel caché derrière le bouton d'étiquette. En plus d'inclure la validation bootstrap 4 support, nous avons également permis de cliquer n'importe où sur l'entrée pour ouvrir la boîte de dialogue du fichier.

Trois états de l'entrée du fichier

Les trois états possibles sont non validés, valides et invalides avec l'attribut de balise d'entrée HTML factice required set.

 enter image description here

Balisage HTML pour l'entrée

Nous introduisons seulement 2 classes personnalisées input-file-dummy et input-file-btn pour styliser et câbler correctement le comportement souhaité. Tout le reste est du balisage Bootstrap 4 standard.

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

Dispositions comportementales JavaScript

L'entrée fictive doit être en lecture seule, comme dans l'exemple d'origine, pour empêcher l'utilisateur de modifier l'entrée, laquelle ne peut être modifiée que via le dialogue de fichier ouvert. Malheureusement, la validation ne se produisant pas sur les champs readonly, nous basculons la possibilité de modification de l'entrée sur le focus et le flou ( événements jqueryonfocusin et onfocusout) et nous assurons qu'elle redevienne valide une fois le fichier sélectionné.

En plus de rendre le champ de texte cliquable, en déclenchant l'événement click du bouton, le reste de la fonctionnalité permettant de renseigner le champ factice a été envisagé par @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();
      });
  });
});

Réglages de style personnalisés

Plus important encore, nous ne voulons pas que le champ readonly saute entre le fond gris et le blanc, nous nous assurons qu'il reste blanc. Le bouton span n'a pas de curseur de pointeur mais nous devons quand même en ajouter un pour l'entrée.

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

nonJoy!

1
nickl-

 enter image description here

Le code suivant fait comme ci-dessus l'image

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
NaveenDA

J'ai modifié @claviska answer et fonctionne comme je veux (Bootstrap 3, 4 non testé):

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

Voici une astuce alternative, ce n'est pas la meilleure solution mais cela vous laisse juste le choix

Code 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');
});
0
Somwang Souksavatd

Essayez de suivre 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>
0
Siyavash Hamdi

J'ai le même problème, et j'essaye comme ça.

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

Le CSS

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

Le JS

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

Remarque : Le bouton .btn-file doit avoir la même balise que le fichier d'entrée

J'espère que vous avez trouvé la meilleure solution ...

0
Esgi Dendyanri

En ce qui concerne claviska answer - si vous souhaitez afficher le nom du fichier téléchargé lors d'un téléchargement de base, vous pouvez le faire dans l'événement onchange des entrées. Il suffit d'utiliser ce 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>

Ce code Jquery JS est responsable de la récupération du nom du fichier téléchargé:

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

Ou avec Vanilla JS:

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

 example

0
Michał Stochmal

Pas de fantaisie requis:

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

ATTENTION: les trois éléments de formulaire en question DOIVENT être des frères et soeurs identiques (.image-fichier-choisi, .image-fichier-bouton, fichier .image)

0
mattdlockyer

Je pensais que je devrais ajouter ma valeur à trois, juste pour dire comment l’entrée de fichier par défaut .custom-file-label et custom-file-input BS4 et comment l’utiliser.

Cette dernière classe est sur le groupe d'entrée et n'est pas visible. Alors que le premier est l’étiquette visible et a un pseudoélément après: qui ressemble à un bouton.

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

Vous ne pouvez pas ajouter de classes à des éléments de suite, mais vous pouvez les styler en CSS (ou SASS).

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