为什么Twitter bootstrap没有花哨的文件元素上传按钮?如果为上传按钮实现蓝色主按钮,那将是很好的 . 甚至可以使用CSS来精简上传按钮吗? (看起来像是无法操作的本机浏览器元素)
请查看Twitter Bootstrap File Input . 它使用非常简单的解决方案,只需添加一个javascript文件,然后粘贴以下代码:
$('input[type=file]').bootstrapFileInput();
以下代码如上图所示
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>
我调整了两个先前的答案,包括多个上传 . 通过这种方式,标签显示文件名(如果只选择了一个),或者相反的情况下显示 x files .
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.length + ' files' : this.files[0].name)"> Files… </label> <span class='label label-info' id="upload-file-info"></span>
它也可能适用于更改按钮文本和类 .
<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>
This works perfectly for 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 --> <span class="badge badge-important" ></span> </span>
关于claviska答案 - 如果你想在基本文件上传中显示上传的文件名,你可以在输入' onchange 事件中进行 . 只需使用此代码:
onchange
<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>
这个jquery JS代码负责检索上传的文件名:
$('#file-upload')[0].value
或者用香草JS:
document.getElementById("file-upload").value
适合我:
jQuery plugin style:
// 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 );
http://markusslima.github.io/bootstrap-filestyle/
$(":file").filestyle();
要么
<input type="file" class="filestyle" data-input="false">
我用http://gregpike.net/demos/bootstrap-file-input/demo.html:
$('.file-inputs').bootstrapFileInput();
这是Bootstrap 3和4的解决方案 .
要创建一个看起来像按钮的功能文件输入控件,您只需要HTML:
HTML
<label class="btn btn-default"> Browse <input type="file" hidden> </label>
这适用于所有现代浏览器,包括IE9 . 如果您还需要支持旧IE,请使用下面显示的旧方法 .
此技术依赖于HTML5 hidden 属性 . Bootstrap 4使用以下CSS在不支持的浏览器中填充此功能 . 如果您使用的是Bootstrap 3,则可能需要添加 .
hidden
[hidden] { display: none !important; }
如果您需要IE8及更低版本的支持,请使用以下HTML / CSS:
<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不会触发文件输入,因此CSS "bloat"可以解决以下问题:
<label>
使文件输入跨越周围的整个宽度/高度 <span>
<span>
使文件输入不可见
我已经发布了有关此方法的更多详细信息,以及如何向用户显示选择了哪个/多少文件的示例:
http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/
它包含在Jasny的bootstrap中 .
可以使用创建简单的上传按钮
<span class="btn btn-file">Upload<input type="file" /></span>
使用fileupload插件,您可以创建更高级的小部件 . 看看http://jasny.github.io/bootstrap/javascript/#fileinput
上传按钮很难用于样式,因为它会对输入而不是按钮进行样式设置 .
但你可以使用这个技巧:
http://www.quirksmode.org/dom/inputfile.html
摘要:
取正常 <input type="file"> 并将其放在 position: relative 的元素中 .
<input type="file">
position: relative
对于同一个父元素,添加一个普通的 <input> 和一个具有正确样式的图像 . 绝对定位这些元素,使它们占据与 <input type="file"> 相同的位置 .
<input>
将 <input type="file"> 的z-index设置为2,使其位于样式化输入/图像的顶部 .
最后,将 <input type="file"> 的不透明度设置为0. <input type="file"> 现在变得有效不可见,并且样式输入/图像闪烁,但您仍然可以单击"Browse"按钮 . 如果按钮位于图像顶部,则用户似乎单击图像并获得正常的文件选择窗口 . (请注意,您不能使用visibility:hidden,因为真正不可见的元素也是不可忽略的,我们需要保持可点击状态)
一个结果可接受的简单解决方案
<input type="file" class="form-control">
风格:
input[type=file].form-control { height: auto; }
我创建了一个自定义上传按钮,只接受图像,可以根据您的要求进行修改 .
希望这可以帮助!! :)
(使用Bootstrap框架)
Codepen-link
<center> <span class="head">Upload Button Re-Imagined</span> <div class="fileUpload blue-btn btn width100"> <span>Upload your Organizations logo</span> <input type="file" class="uploadlogo" /> </div> </center>
.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!'); } } });
请在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>
这是另一种技巧,它不是最好的解决方案,但它只是给你一个选择
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'); });
从上面其他帖子中获得了一些灵感,这里有一个完整的解决方案,它将看起来像表单控件字段和输入组插件的内容组合在一起,用于包含指向当前文件的链接的干净文件输入窗口小部件 .
.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>
不需要花哨的shiz:
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" /> <input class="btn image-file-button" value="Choose Image" /> <input class="image-file hide" type="file" name="image"/> <!-- Hidden --> <input class="btn" type="submit" name="image" value="Upload" /> </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 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文件替换twitter bootstrap .
问候 .
我修改了@claviska的答案并按照我喜欢的方式工作(Bootstrap 3,4未经测试):
<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>
我很惊讶没有提到 <label> 元素 .
Solution:
<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 ...
Solution for including the filename:
<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>
上面的解决方案需要jQuery .
/ * * Bootstrap 3 filestyle * http://dev.tudosobreweb.com.br/bootstrap-filestyle/ * *版权所有(c)2013 Markus Vinicius da Silva Lima *由Paulo Henrique Foxer更新bootstrap 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);
我有同样的问题,我试试这样 .
<div> <button type='button' class='btn btn-info btn-file'>Browse</button> <input type='file' name='image'/> </div>
<style> .btn-file { position:absolute; } </style>
<script> $(document).ready(function(){ $('.btn-file').click(function(){ $('input[name="image"]').click(); }); }); </script>
注意:按钮.btn文件必须与输入文件位于同一标记中
希望你找到最好的解决方案......
使用其他答案的部分简化回答,主要是user2309766和dotcomsuperstar .
特征:
使用按钮和字段的Bootstrap按钮插件 .
只有一个输入;多个输入将由表单拾取 .
除了"display: none;"之外没有额外的css来隐藏文件输入 .
可见按钮触发隐藏文件输入的单击事件 .
split 删除文件路径使用正则表达式和分隔符''和'/' .
split
码:
<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>
由于不需要额外的插件,这个引导程序解决方案对我很有用:
<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/(bootstrap 2)
http://jsfiddle.net/haisumbhatti/y3xyU/(bootstrap 3)
24 回答
请查看Twitter Bootstrap File Input . 它使用非常简单的解决方案,只需添加一个javascript文件,然后粘贴以下代码:
以下代码如上图所示
Html
Javascript
多重上传的解决方案
我调整了两个先前的答案,包括多个上传 . 通过这种方式,标签显示文件名(如果只选择了一个),或者相反的情况下显示
x files
.它也可能适用于更改按钮文本和类 .
This works perfectly for me
关于claviska答案 - 如果你想在基本文件上传中显示上传的文件名,你可以在输入'
onchange
事件中进行 . 只需使用此代码:这个jquery JS代码负责检索上传的文件名:
或者用香草JS:
适合我:
更新
jQuery plugin style:
http://markusslima.github.io/bootstrap-filestyle/
要么
我用http://gregpike.net/demos/bootstrap-file-input/demo.html:
要么
这是Bootstrap 3和4的解决方案 .
要创建一个看起来像按钮的功能文件输入控件,您只需要HTML:
HTML
这适用于所有现代浏览器,包括IE9 . 如果您还需要支持旧IE,请使用下面显示的旧方法 .
此技术依赖于HTML5
hidden
属性 . Bootstrap 4使用以下CSS在不支持的浏览器中填充此功能 . 如果您使用的是Bootstrap 3,则可能需要添加 .旧IE的遗留方法
如果您需要IE8及更低版本的支持,请使用以下HTML / CSS:
HTML
CSS
请注意,当您单击
<label>
时,旧IE不会触发文件输入,因此CSS "bloat"可以解决以下问题:使文件输入跨越周围的整个宽度/高度
<span>
使文件输入不可见
反馈和补充阅读
我已经发布了有关此方法的更多详细信息,以及如何向用户显示选择了哪个/多少文件的示例:
http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/
它包含在Jasny的bootstrap中 .
可以使用创建简单的上传按钮
使用fileupload插件,您可以创建更高级的小部件 . 看看http://jasny.github.io/bootstrap/javascript/#fileinput
上传按钮很难用于样式,因为它会对输入而不是按钮进行样式设置 .
但你可以使用这个技巧:
http://www.quirksmode.org/dom/inputfile.html
摘要:
取正常
<input type="file">
并将其放在position: relative
的元素中 .对于同一个父元素,添加一个普通的
<input>
和一个具有正确样式的图像 . 绝对定位这些元素,使它们占据与<input type="file">
相同的位置 .将
<input type="file">
的z-index设置为2,使其位于样式化输入/图像的顶部 .最后,将
<input type="file">
的不透明度设置为0.<input type="file">
现在变得有效不可见,并且样式输入/图像闪烁,但您仍然可以单击"Browse"按钮 . 如果按钮位于图像顶部,则用户似乎单击图像并获得正常的文件选择窗口 . (请注意,您不能使用visibility:hidden,因为真正不可见的元素也是不可忽略的,我们需要保持可点击状态)一个结果可接受的简单解决方案
风格:
我创建了一个自定义上传按钮,只接受图像,可以根据您的要求进行修改 .
希望这可以帮助!! :)
(使用Bootstrap框架)
Codepen-link
HTML
CSS
JS
请在Bootstrap v.3.3.4中尝试以下操作
这是另一种技巧,它不是最好的解决方案,但它只是给你一个选择
HTML代码:
使用Javascript:
从上面其他帖子中获得了一些灵感,这里有一个完整的解决方案,它将看起来像表单控件字段和输入组插件的内容组合在一起,用于包含指向当前文件的链接的干净文件输入窗口小部件 .
不需要花哨的shiz:
HTML:
JS:
注意:有问题的三个表单元素必须是彼此的兄弟元素(.image-file-chosen,.image-file-button,.image-file)
这是我喜欢的最佳文件上传样式:
您可以在以下位置获得演示和更多样式:
http://www.jasny.net/bootstrap/javascript/#fileinput
但是使用这个,你应该用jasny bootstrap文件替换twitter bootstrap .
问候 .
我修改了@claviska的答案并按照我喜欢的方式工作(Bootstrap 3,4未经测试):
我很惊讶没有提到
<label>
元素 .Solution:
不需要任何JS或时髦的CSS ...
Solution for including the filename:
上面的解决方案需要jQuery .
/ * * Bootstrap 3 filestyle * http://dev.tudosobreweb.com.br/bootstrap-filestyle/ * *版权所有(c)2013 Markus Vinicius da Silva Lima *由Paulo Henrique Foxer更新bootstrap 3 *版本2.0.0 *在MIT许可下获得许可 . * * /
我有同样的问题,我试试这样 .
CSS
JS
希望你找到最好的解决方案......
使用其他答案的部分简化回答,主要是user2309766和dotcomsuperstar .
特征:
使用按钮和字段的Bootstrap按钮插件 .
只有一个输入;多个输入将由表单拾取 .
除了"display: none;"之外没有额外的css来隐藏文件输入 .
可见按钮触发隐藏文件输入的单击事件 .
split
删除文件路径使用正则表达式和分隔符''和'/' .码:
由于不需要额外的插件,这个引导程序解决方案对我很有用:
演示:
http://jsfiddle.net/haisumbhatti/cAXFA/1/(bootstrap 2)
http://jsfiddle.net/haisumbhatti/y3xyU/(bootstrap 3)