risposta-alla-domanda-sullo-sviluppo-web-bd.com

Pulsante di caricamento dell'elemento del file modulo Bootstrap di Twitter

Perché non c'è un pulsante di caricamento dell'elemento file di fantasia per il bootstrap di Twitter? Sarebbe carino se il pulsante primario blu fosse implementato per il pulsante di caricamento. È persino possibile perfezionare il pulsante di caricamento tramite CSS? (sembra un elemento browser nativo che non può essere manipolato) 

cssformstwitter-bootstrapinput-type-file
533
jkushner

Ecco una soluzione per Bootstrap 3 e 4.

Per rendere un controllo di input di file funzionale simile a un pulsante, è necessario solo l'HTML:

HTML

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

Funziona su tutti i browser moderni, incluso IE9 +. Se hai bisogno di supporto per il vecchio IE, utilizza l'approccio legacy mostrato di seguito.

Questa tecnica si basa sull'attributo hidden HTML5. Bootstrap 4 utilizza il seguente CSS per applicare questa funzionalità nei browser non supportati. Potrebbe essere necessario aggiungere se stai usando Bootstrap 3.

[hidden] {
  display: none !important;
}

Approccio legacy per il vecchio IE

Se hai bisogno di supporto per IE8 e versioni successive, utilizza il seguente HTML/CSS:

HTML

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

CSS

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

Nota che il vecchio IE non attiva l'input del file quando fai clic su un <label>, quindi il CSS "bloat" fa un paio di cose per ovviare a questo:

  • Rende l'input del file esteso per l'intera larghezza/altezza del <span> circostante
  • Rende invisibile l'input del file

Feedback e letture aggiuntive

Ho pubblicato ulteriori dettagli su questo metodo, nonché esempi su come mostrare all'utente quali/quanti file sono selezionati:

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

913
claviska

Sono sorpreso che non ci fosse menzione dell'elemento <label>.

Soluzione: 

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

Non c'è bisogno di alcun JS, o css funky ...

Soluzione per includere il nome 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>

La soluzione sopra richiede jQuery.

354
Kirill Fuchs

Con nessun plugin aggiuntivo richiesto, questa soluzione di bootstrap funziona alla grande per me:

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

enter image description here

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

enter image description here

130
codefreak

È incluso nella forcella di bootstrap di Jasny.

Un semplice pulsante di caricamento può essere creato usando

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

Con il plugin fileupload puoi creare widget più avanzati. Dai un'occhiata a http://jasny.github.io/bootstrap/javascript/#fileinput

87
Jasny - Arnold Daniels

I pulsanti di caricamento sono difficili da applicare perché impaginano l'input e non il pulsante.

ma puoi usare questo trucco:

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

Sommario:

  1. Prendi un <input type="file"> normale e inseriscilo in un elemento con position: relative. 

  2. A questo stesso elemento genitore, aggiungi un <input> normale e un'immagine, che hanno gli stili corretti. Posiziona questi elementi in modo assoluto, in modo che occupino lo stesso posto del <input type="file">. 

  3. Imposta lo z-index di <input type="file"> su 2 in modo che si trovi sopra l'input/immagine in stile. 

  4. Infine, imposta l'opacità di <input type="file"> su 0. Il <input type="file"> ora diventa effettivamente invisibile e gli stili input/image vengono visualizzati, ma puoi ancora fare clic sul pulsante "Sfoglia". Se il pulsante è posizionato sopra l'immagine, l'utente sembra fare clic sull'immagine e ottiene la normale finestra di selezione dei file. (Nota che non puoi usare la visibilità: nascosta, perché anche un elemento veramente invisibile è invalicabile, e abbiamo bisogno che rimanga cliccabile)

65
baptme

Per me va bene: 

Aggiornare

Stile 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

Risposta semplificata utilizzando parti di altre risposte, principalmente user2309766 e dotcomsuperstar.

Caratteristiche:

  • Utilizza il componente aggiuntivo Bootstrap per pulsante e campo.
  • Solo un input; più input verrebbero rilevati da un modulo.
  • Nessun css in più eccetto "display: none;" per nascondere l'input del file.
  • Il pulsante visibile attiva l'evento click per l'immissione di file nascosti.
  • split per rimuovere il percorso del file usa regex e delimitatori '\' e '/'.

Codice:

<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

Con qualche ispirazione da altri post sopra, ecco una soluzione completa che combina ciò che sembra un campo di controllo del form con un add-on del gruppo di input per un widget di input di file puliti che include un collegamento al file corrente.

.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

Questo funziona perfettamente per me

<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

Si prega di controllare Input del file di avvio di Twitter . Usa una soluzione molto semplice, basta aggiungere un file javascript e incollare il seguente codice:

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

Una soluzione semplice con esito accettabile:

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

E lo stile:

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

questo è il miglior stile di upload di file che mi piace:

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

puoi ottenere demo e più stili a:

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

ma usando questo, dovresti sostituire il bootstrap di Twitter con i file di bootstrap di jasny.

saluti.

3
navins

Ho creato un pulsante di caricamento personalizzato per accettare solo le immagini, che possono essere modificate secondo le tue esigenze.

Spero che questo ti aiuti!! :)

(Framework Bootstrap utilizzato)

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

Io uso http://gregpike.net/demos/bootstrap-file-input/demo.html :

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

o

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

Soluzione per il caricamento multiplo

Ho ottimizzato due risposte precedenti per includere più caricamenti. In questo modo l'etichetta mostra il nome del file, se è selezionato solo uno o x files nel caso opposto.

<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

Può anche valere per cambiare il testo e la classe del pulsante.

<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 * Aggiornamento bootstrap 3 di Paulo Henrique Foxer * Versione 2.0.0 * Autorizzato con licenza 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

Basato sulla soluzione assolutamente brillante @claviska, a cui è dovuto tutto il merito.

Inserimento file Bootstrap 4 con funzionalità complete con testo di validazione e aiuto.

In base all'esempio di gruppo input abbiamo un campo di testo di input fittizio utilizzato per visualizzare il nome file all'utente, che viene popolato dall'evento onchange sul campo del file di input effettivo nascosto dietro il pulsante dell'etichetta. Oltre a includere il bootstrap 4 validation support abbiamo anche permesso di cliccare ovunque sull'input per aprire la finestra di dialogo del file.

Tre stati dell'input del file

I tre stati possibili sono non validati, validi e non validi con l'attributo di tag di input dummy html required set.

 enter image description here

Markup HTML per l'input

Introduciamo solo 2 classi personalizzate input-file-dummy e input-file-btn per stilare correttamente e collegare il comportamento desiderato. Tutto il resto è il markup standard di Bootstrap 4.

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

Disposizioni comportamentali JavaScript

L'ingresso fittizio deve essere letto solo, come nell'esempio originale, per impedire all'utente di modificare l'input che può essere modificato solo tramite la finestra di dialogo Apri file. Sfortunatamente la convalida non si verifica sui campi readonly, quindi modifichiamo la modificabilità dell'input su focus e blur ( jquery eventsonfocusin e onfocusout) e assicuriamo che diventi nuovamente validabile una volta selezionato un file.

Oltre a rendere il campo di testo selezionabile, attivando l'evento click del pulsante, il resto della funzionalità di compilazione del campo fittizio era previsto da @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();
      });
  });
});

Modifiche di stile personalizzato

La cosa più importante è che non vogliamo che il campo readonly salti da uno sfondo grigio a uno bianco, in modo da garantire che rimanga bianco. Il pulsante span non ha un cursore puntatore, ma è necessario aggiungerne uno per l'input.

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

nJoy!

1
nickl-

 enter image description here

Il seguente codice fa come sopra l'immagine

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

Ho modificato la risposta @claviska e funziona come mi piace (Bootstrap 3, 4 non testato):

<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

Ecco un trucco alternativo, non è la soluzione migliore ma ti dà solo una scelta

Codice 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

Prova a seguire in 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

Ho lo stesso problema e lo provo in questo modo.

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

Il CSS

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

Il JS

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

Nota : Il pulsante .btn-file deve essere nello stesso tag del file di input

Spero che tu abbia trovato la soluzione migliore ...

0
Esgi Dendyanri

Rispetto alla risposta claviska: se si desidera mostrare il nome del file caricato in un caricamento di file di base, è possibile farlo nell'evento onchange degli ingressi. Basta usare questo codice:

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

Questo codice JS di Jquery è responsabile del recupero del nome del file caricato:

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

O con Vanilla JS:

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

 example

0
Michał Stochmal

Niente shiz fantasia richiesto:

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

ATTENZIONE: i tre elementi del modulo in questione DEVONO essere fratelli l'uno dell'altro (.image-file-chosen, .image-file-button, .image-file)

0
mattdlockyer

Ho pensato di aggiungere il mio valore di tre pence, solo per dire come l'.custom-file-label di default e l'custom-file-input input di file BS4 e come possa essere usato.

Quest'ultima classe si trova nel gruppo di input e non è visibile. Mentre il primo è l'etichetta visibile e ha un: dopo pseudoelemento che assomiglia a un pulsante.

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

Non è possibile aggiungere classi a psuedoelements, ma è possibile modificarli in CSS (o SASS).

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