Twitter引导表单文件元素上传button
为什么没有一个花式的文件元素上传button为twitter引导？ 如果蓝色的主要button是用于上传button，那将是甜蜜的。 甚至有可能使用CSS来细化上传button（看起来像是一个本地浏览器元素，不能被操纵）
这是Bootstrap 3和4的解决scheme。
要使function文件input控件看起来像一个button，只需要HTML：
HTML
<label class="btn btn-default"> Browse <input type="file" hidden> </label> 这适用于所有现代浏览器，包括IE9 +。 如果您还需要支持旧IE，请使用下面显示的传统方法。
这种技术依赖于HTML5的hidden属性。 引导程序4使用以下CSS在不支持的浏览器中使用此function。 如果您使用Bootstrap 3，则可能需要添加。
[hidden] { display: none !important; }
传统的旧IE方法
如果您需要IE8及以下版本的支持，请使用以下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; }
请注意，当您单击<label>时，旧的IE不会触发文件input，因此CSS“膨胀”会做一些事情来解决这个问题：
- 使文件input跨越周围
<span>的全部宽度/高度 - 使文件input不可见
反馈和附加阅读
我已经发布了关于这个方法的更多细节，以及如何向用户显示select了多less个文件的例子：
http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/
我很惊讶没有提及<label>元素。
解：
<label class="btn btn-primary" for="my-file-selector"> <input id="my-file-selector" type="file" style="display:none;"> Button Text Here </label>
不需要任何JS或时髦的CSS …
包含文件名的解决scheme：
<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>
上面的解决scheme需要jQuery。
不需要额外的插件，这个bootstrap解决scheme对我来说非常适合：
<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> <span class='label label-info' id="upload-file-info"></span> </div>
演示：
http://jsfiddle.net/haisumbhatti/cAXFA/1/ （引导2）
http://jsfiddle.net/haisumbhatti/y3xyU/ （引导3）
它包含在Jasny的bootstrap分支中。
一个简单的上传button可以使用创build
<span class="btn btn-file">Upload<input type="file" /></span>
使用fileupload插件，您可以创build更多高级小部件。 看看http://jasny.github.io/bootstrap/javascript/#fileinput
上传button是一种风格，因为它的样式是input而不是button。
但是你可以使用这个技巧：
http://www.quirksmode.org/dom/inputfile.html
概要：
-
取一个正常的
<input type="file">并放在一个position: relative的元素中。 -
对于这个相同的父元素，添加一个正常的
<input>和一个具有正确样式的图像。 确定这些元素的位置，使它们占据与<input type="file">相同的位置。 -
将
<input type="file">的z-index设置为2，使其位于样式化input/图像的顶部。 -
最后，将
<input type="file">的不透明度设置为0.现在，<input type="file">变得不可见，并且样式input/图像闪耀通过，但仍然可以单击“浏览“button。 如果button位于图像顶部，用户似乎点击图像并获得正常的文件select窗口。 （请注意，您不能使用visibility：hidden，因为一个真正不可见的元素也是不可点击的，我们需要保持点击）
适用于我：
- Bootstrap中漂亮的文件input字段
更新
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 );
从上面的其他post的一些灵感，这里是一个完整的解决scheme，它结合了一个看起来像一个表单控件字段和一个input组添加一个干净的文件input小部件，包括当前文件的链接。
.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>
使用来自其他答案的部分的简单答案，主要是user2309766和dotcomsuperstar。
特征：
- 使用button和字段的引导button插件。
- 只有一个input; 多个input将被一个表单拾取。
- 没有额外的CSS除了“显示：无;” 隐藏文件input。
- 可见button触发隐藏文件input的点击事件。
-
split删除文件path使用正则expression式和分隔符“\”和“/”。
码：
<script src="ajax/bootstrap/3.3.4/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>
这对我来说是完美的
<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 --> <span class="badge badge-important" ></span> </span>
请查看Twitter Bootstrap文件input 。 它使用非常简单的解决scheme，只需添加一个JavaScript文件并粘贴以下代码：
$('input[type=file]').bootstrapFileInput();
一个简单的解决scheme，可以接受
<input type="file" class="form-control">
风格：
input[type=file].form-control { height: auto; }
/ * *引导3文件风格* http://dev.tudosobreweb.com.br/bootstrap-filestyle/ * *版权所有（c）2013年马库斯Vinicius达席尔瓦利马*更新引导3保罗亨里克福克斯*版本2.0.0 *授权根据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);
我使用http://gregpike.net/demos/bootstrap-file-input/demo.html ：
$('input[type=file]').bootstrapFileInput();
要么
$('.file-inputs').bootstrapFileInput();
我已经创build了一个自定义上传button，只接受图像，可以根据您的要求进行修改。
希望这可以帮助！！ 🙂
（使用Bootstrap框架）
Codepen链接
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!'); } } });
这是我喜欢的最好的file upload风格：
<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>
您可以在以下位置获得演示和更多样式：
http://www.jasny.net/bootstrap/javascript/#fileinput
但是使用这个，你应该用jasny bootstrap文件replacetwitter bootstrap ..
问候。
我修改@ claviska答案和我喜欢的工作（引导3，4未经testing）：
<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>
没有花哨的需求：
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); }); });
注意：这三个表单元素必须是彼此的兄弟（.image-file-chosen，.image-file-button，.image-file）
我有同样的问题，我尝试这样。
<div> <button type='button' class='btn btn-info btn-file'>Browse</button> <input type='file' name='image'/> </div>
CSS
<style> .btn-file { position:absolute; } </style>
JS
<script> $(document).ready(function(){ $('.btn-file').click(function(){ $('input[name="image"]').click(); }); }); </script>
注意：button.btn文件必须与input文件在同一个标记中
希望你find最好的解决scheme…
尝试下面的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>
一个新的file uploadbutton的file类已经实施到刚刚发布的BootStrap版本4-alpha： http : //v4-alpha.getbootstrap.com/components/forms/#file-browser访问网站，看看如何它看起来。 以下是一些示例代码，介绍如何使用BootStrap 4-alpha设置文件input的样式：
<label class="file"> <input type="file" id="file"> <span class="file-custom"></span> </label>
这是另一个窍门，这不是最好的解决scheme，但它只是给你一个select
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'); });
下面的代码如上图所示
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>
解决scheme多次上传
我调整了两个以前的答案，包括多个上传。 通过这种方式，标签显示文件名，如果只select了一个，或者在相反的情况下显示x files 。
<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[0].name : this.files.length + ' files')"> Files… </label> <span class='label label-info' id="upload-file-info"></span>
它也可能适用于更改button文本和类。
<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…</span> </label>
http://markusslima.github.io/bootstrap-filestyle/
$(":file").filestyle();
要么
<input type="file" class="filestyle" data-input="false">
