css - style - input type file bootstrap 3




Pulsante di caricamento dell'elemento del file di modulo Bootstrap di Twitter (16)

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)


Soluzione per più upload

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>

Può valere anche 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>


È incluso nel forkstrap 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


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)

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


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


Ecco una soluzione per Bootstrap 3 e 4.

Per rendere un controllo di input di file funzionale simile a un pulsante, è necessario solo 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 anche 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 si sta utilizzando 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 su cui lavorare:

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

Feedback e letture aggiuntive

Ho pubblicato maggiori 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/


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

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>

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 normale <input type="file"> e inseriscilo in un elemento con position: relative .

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

  3. Impostare 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 si illuminano, ma puoi ancora fare clic su "Sfoglia "pulsante. Se il pulsante è posizionato sopra l'immagine, l'utente sembra cliccare 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)


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)


Per me va bene:

Aggiornare

Stile del 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 );

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


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>


Sono sorpreso che non ci fosse alcuna 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.


Una soluzione semplice con esito accettabile:

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

E lo stile:

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


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>




input-type-file