Pregunta Botón de carga de elementos del archivo de formulario de Twitter Bootstrap


¿Por qué no hay un botón de carga de elemento de archivo elegante para Twitter bootstrap? Sería bueno si el botón principal azul se implementó para el botón de carga. ¿Es posible retocar el botón de carga con CSS? (Parece un elemento navegador nativo que no se puede manipular)


510
2018-06-27 21:41


origen


Respuestas:


Aquí hay una solución para Bootstrap 3 y 4.

Para hacer un control de entrada de archivo funcional que se parece a un botón, solo necesita HTML:

HTML

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

Esto funciona en todos los navegadores modernos, incluido IE9 +. Si también necesita soporte para IE antiguo, utilice el enfoque heredado que se muestra a continuación.

Esta técnica se basa en el HTML5 hidden atributo. Bootstrap 4 usa el siguiente CSS para calzar esta característica en navegadores no compatibles. Puede necesitar agregar si está usando Bootstrap 3.

[hidden] {
  display: none !important;
}

Enfoque heredado para viejo IE

Si necesita soporte para IE8 y abajo, use el siguiente 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;
}

Tenga en cuenta que el viejo IE no activa la entrada del archivo cuando hace clic en un <label>, por lo que The CSS "bloat" hace un par de cosas para solucionar eso:

  • Hace que la entrada del archivo abarque todo el ancho / alto del entorno <span>
  • Hace que la entrada de archivo sea invisible

Comentarios y lecturas adicionales

He publicado más detalles sobre este método, así como ejemplos de cómo mostrar al usuario qué / cuántos archivos se seleccionan:

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


877
2017-08-10 17:30



Estoy sorprendido de que no haya mención de la <label> elemento.

Solución:

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

No es necesario ningún JS o funky css ...

Solución para incluir el nombre del archivo:

<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 solución anterior requiere jQuery.


332
2017-07-31 08:17



Sin necesidad de un complemento adicional, esta solución de arranque funciona muy bien para mí:

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

manifestación:

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

enter image description here

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

enter image description here


127
2018-02-21 07:02



Está incluido en el tenedor de arranque de Jasny.

Se puede crear un botón de carga simple usando

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

Con el complemento de carga de archivos puede crear widgets más avanzados. Mira esto http://jasny.github.io/bootstrap/javascript/#fileinput


87
2017-10-16 13:10



Los botones de carga son difíciles de peinar porque estiliza la entrada y no el botón.

pero puedes usar este truco:

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

Resumen:

  1. Toma una normal <input type="file"> y ponerlo en un elemento con position: relative.

  2. A este mismo elemento principal, agregue un elemento normal <input> y una imagen, que tienen los estilos correctos. Coloque estos elementos absolutamente, de modo que ocupen el mismo lugar que el <input type="file">.

  3. Establezca el índice z de la <input type="file"> a 2 para que quede sobre la entrada / imagen con estilo.

  4. Finalmente, configure la opacidad del <input type="file"> a 0. La <input type="file"> ahora se vuelve efectivamente invisible, y la entrada / imagen de estilos brilla a través, pero aún puede hacer clic en el botón "Buscar". Si el botón se coloca en la parte superior de la imagen, el usuario parece hacer clic en la imagen y obtiene la ventana de selección de archivos normal. (Tenga en cuenta que no puede usar la visibilidad: oculta, porque un elemento verdaderamente invisible no se puede cliquear, y necesitamos que se pueda seguir haciendo clic)


65
2018-06-27 21:59



Funciona para mi:

Actualizar

estilo 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
2017-12-05 20:19



Respuesta simplificada utilizando partes de otras respuestas, principalmente user2309766 y dotcomsuperstar.

caracteristicas:

  • Utiliza el complemento del botón Bootstrap para el botón y el campo.
  • Solo una entrada; múltiples entradas serían recogidas por un formulario.
  • Sin css extra excepto "display: none" para ocultar la entrada del archivo.
  • El botón visible dispara el evento clic para la entrada del archivo oculto.
  • split para eliminar la ruta del archivo utiliza expresiones regulares y delimitadores '\' y '/'.

Código:

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


13
2018-05-27 17:29



Con algo de inspiración de otras publicaciones anteriores, aquí hay una solución completa que combina lo que parece un campo de control de formulario con un input-group-addon para un widget de entrada de archivo limpio que incluye un enlace al archivo actual.

.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
2017-12-14 07:37



Esto funciona perfectamente para mi

<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
2018-04-23 04:44



Por favor consulte Entrada de archivo Twitter Bootstrap. Utiliza una solución muy simple, solo agrega un archivo javascript y pega el siguiente código:

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

7
2018-04-19 09:33