Twitter Bootstrap表单文件元素上传按钮

为什么没有一个花哨的文件元素上传按钮为twitter引导？ 如果为上传按钮实现了蓝色主按钮，那将是甜蜜的。 使用CSS甚至可以设置上传按钮吗？ （看起来像一个不能被操纵的本地浏览器元素）

---

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

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

HTML

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

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

这些技术依赖于HTML5 hidden属性。 引导程序4使用以下CSS将此功能填充到不受支持的浏览器中。 如果您使用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不会触发文件输入，因此CSS“膨胀”会解决一些问题：

使文件输入跨越周围<span>的全部宽度/高度

使文件输入不可见

---

反馈和附加阅读

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

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 ...

包含文件名的解决方案：

<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。

---

无需额外的插件，这个引导程序解决方案对我来说非常适用：

<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>
        &nbsp;
        <span class='label label-info' id="upload-file-info"></span>
</div>

演示：

http://jsfiddle.net/haisumbhatti/cAXFA/1/（引导2）

http://jsfiddle.net/haisumbhatti/y3xyU/（bootstrap 3）

链接地址: http://www.djcxy.com/p/13245.html

上一篇: Twitter Bootstrap Form File Element Upload Button

下一篇: How do you get centered content using Twitter Bootstrap?