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)

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

 

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 atributo hidden HTML5. 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

  Browse   

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 IE antiguo no desencadena la entrada del archivo cuando hace clic en una , 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 rodea
  • 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/

Estoy sorprendido de que no haya mención del elemento .

Solución:

  

No es necesario ningún JS o funky css …

Solución para incluir el nombre del archivo:

   

La solución anterior requiere jQuery.

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

  

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

Está incluido en el tenedor de arranque de Jasny.

Se puede crear un botón de carga simple usando

 Upload 

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

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. Tome un normal y póngalo en un elemento con position: relative .

  2. Para este mismo elemento principal, agregue una normal y una imagen, que tienen los estilos correctos. Coloque estos elementos absolutamente, de modo que ocupen el mismo lugar que el .

  3. Establezca el índice z del en 2 para que quede sobre la entrada / imagen con estilo.

  4. Finalmente, establezca la opacidad de en 0. El ahora se vuelve efectivamente invisible, y la entrada / imagen de estilos brilla a través, pero aún puede hacer clic en “Browse” “botón. 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)

Funciona para mi:

  • Bonito campo de entrada de archivo en Bootstrap

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: //  //  // (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 = '
'; nice_file_block_text += ' '; nice_file_block_text += ' '; nice_file_block_text += ' '; nice_file_block_text += ' '; nice_file_block_text += '
'; 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 );

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:

    
Browse

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

Esto funciona perfectamente para mi

          

Por favor, echa un vistazo a Twitter Bootstrap File Input . Utiliza una solución muy simple, solo agrega un archivo javascript y pega el siguiente código:

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

Una solución simple con un resultado aceptable:

  

Y el estilo:

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

He creado un botón de carga personalizado para aceptar solo imágenes, que se pueden modificar según su requisito.

¡¡Espero que esto ayude!! 🙂

(Marco de Bootstrap usado)

Codepen-link

HTML

 


Upload Button Re-Imagined

Upload your Organizations logo

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

este es el mejor estilo de carga de archivos que me gusta:

 
Select fileChangeRemove

puedes obtener una demostración y más estilos en:

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

pero al usar esto, debes reemplazar twitter bootstrap con jasny bootstrap files …

Saludos.

/ * * Bootstrap 3 filestyle * http://dev.tudosobreweb.com.br/bootstrap-filestyle/ * * Copyright (c) 2013 Markus Vinicius da Silva Lima * Actualización de bootstrap 3 por Paulo Henrique Foxer * Versión 2.0.0 * Licencia bajo la licencia de 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 ' '; } else { return ''; } }, htmlInput: function () { if (this.options.input) { return ' '; } 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()+ ''; this.$elementFilestyle = $('
'+html+'
'); 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);

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

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

o

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

Solución para carga múltiple

Ajusté dos respuestas anteriores para incluir cargas múltiples. De esta forma, la etiqueta muestra el nombre del archivo, si solo se selecciona uno, o x files en el caso contrario.

   

enter image description here

También se puede aplicar para cambiar el texto y la clase del botón.

  

enter image description here

Modifiqué la respuesta de @claviska y funcionó como me gusta (Bootstrap 3, 4 no probado):

  

enter image description here

El siguiente código hace que arriba de la imagen

Html

 

Javascript

  

No se requiere shiz de lujo:

HTML:

 




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

PRECAUCIÓN: Los tres elementos de formulario en cuestión DEBEN ser hermanos entre sí (.image-file-chosen, .image-file-button, .image-file)

Tengo el mismo problema, y ​​lo bash así.

 

El CSS

  

El JS

  

Nota: El botón .btn-file debe estar en la misma etiqueta que el archivo de entrada

Espero que hayas encontrado la mejor solución …

Intenta seguir en el Bootstrap v.3.3.4

 
Select a file...

Aquí hay un truco alternativo, no es la mejor solución pero solo te da una opción

Código HTML:

   

Javascript:

 $("#btn_upload").click(function(e){ e.preventDefault(); $("#fileupload").trigger('click'); }); 

Con respecto a la respuesta de claviska, si desea mostrar el nombre del archivo cargado en una carga de archivo básico, puede hacerlo en el evento onchange las entradas. Solo usa este código:

   

Este código jquery JS es responsable de recuperar el nombre del archivo cargado:

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

O con JS vainilla:

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

ejemplo