Twitter Bootstrap表单文件元素上传按钮 [英] Twitter Bootstrap Form File Element upload button

问题描述

为什么twitter bootstrap没有一个花哨的文件元素上传按钮？如果为上传按钮实现了蓝色主按钮，那么它会很好用。甚至可以使用CSS轻松上传按钮（看起来像是无法操作的原生浏览器元素）

解决方案

解决方案为Bootstrap 3和4。

要使功能文件输入控件看起来像一个按钮，你只需要HTML：

HTML

>
浏览< input type =fileclass =hidden>
< / label>

这适用于所有现代浏览器，包括IE9 +。如果您还需要对旧IE的支持，请使用以下所示的旧方法。

---

旧IE的旧方法

如果您需要支持IE8及以下版本，请使用以下HTML / CSS：

/ strong>

 < span class =btn btn-default btn-file> 
浏览< 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; 
} 
  

请注意，旧的IE不会触发文件输入，当您点击< label> ，所以CSSbloat做了几个事情来解决：

• 使文件输入跨度满足周围的整个宽度/高度< span>


• 使文件输入不可见

---

附加阅读

我已发布有关此方法的更多详细信息，以及如何向用户显示选择了哪些文件的示例：

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

Why isn't there a fancy file element upload button for twitter bootstrap? it would be sweet if the blue primary button was implemented for the upload button. Is it even possible to finesse the upload button using CSS (seems like a native browser element that cant be manipulated)

解决方案

Here's a solution for Bootstrap 3 and 4.

To make a functional file input control that looks like a button, you only need HTML:

HTML

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

This works in all modern browsers, including IE9+. If you need support for old IE as well, please use the legacy approach shown below.

---

Legacy approach for old IE

If you need support for IE8 and below, use the following 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;
}

Note that old IE doesn't trigger the file input when you click on a <label>, so the The CSS "bloat" does a couple things to work around that:

• Makes the file input span the full width/height of the surrounding <span>
• Makes the file input invisible

---

Feedback & Additional Reading

I've posted more details about this method, as well as examples for how to show the user which/how many files are selected:

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

这篇关于Twitter Bootstrap表单文件元素上传按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！