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

问题描述

为什么 twitter bootstrap 没有花哨的文件元素上传按钮?如果为上传按钮实现了蓝色主按钮，那就太好了.甚至可以使用 CSS 优化上传按钮吗?(似乎是无法操作的原生浏览器元素)

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 can't be manipulated)

推荐答案

这是 Bootstrap 3 和 4 的解决方案.

Here's a solution for Bootstrap 3 and 4.

要制作一个看起来像按钮的功能性文件输入控件，您只需要 HTML:

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

HTML

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

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

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

此技术依赖于 HTML5 hidden 属性.Bootstrap 4 使用以下 CSS 在不支持的浏览器中填充此功能.如果您使用的是 Bootstrap 3，则可能需要添加.

This techniques relies on the HTML5 hidden attribute. Bootstrap 4 uses the following CSS to shim this feature in unsupportive browsers. You may need to add if you're using Bootstrap 3.

[hidden] {
  display: none !important;
}

---

旧 IE 的传统方法

如果您需要对 IE8 及以下的支持，请使用以下 HTML/CSS:

---

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

请注意，当您单击 时，旧的 IE 不会触发文件输入，因此 CSS 的膨胀"会出现问题.做了几件事来解决这个问题:

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:

• 使文件输入跨越周围
的整个宽度/高度
• 使文件输入不可见

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

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

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

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