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

我以为我要加上三便士的价值，只是说出默认.custom-file-label和custom-file-inputBS4文件输入以及如何使用它们。

后一类在输入组上，不可见。前者是可见标签，并且具有：after伪元素，看起来像一个按钮。

<div class="custom-file">
<input type="file" class="custom-file-input" id="upload">
<label class="custom-file-label" for="upload">Choose file</label>
</div>

您不能将类添加到伪元素，但是可以在CSS（或SASS）中设置其样式。

.custom-file-label:after {
    color: #fff;
    background-color: #1e7e34;
    border-color: #1c7430;
    pointer: cursor;
}

http://markusslima.github.io/bootstrap-filestyle/

$(":file").filestyle();

要么

<input type="file" class="filestyle" data-input="false">

这是我喜欢的最佳文件上传样式：

<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引导程序文件替换twitter引导程序。

问候。

具有可接受结果的简单解决方案：

<input type="file" class="form-control">

和样式：

input[type=file].form-control {
    height: auto;
}

上传按钮的样式很麻烦，因为它为输入而不是按钮设置样式。

但是您可以使用以下技巧：

http://www.quirksmode.org/dom/inputfile.html

摘要：

1. 选取法线<input type="file">并将其放入的元素中position: relative。

2. 向同一父元素添加<input>具有正确样式的法线和图像。绝对放置这些元素，以便它们与占据相同的位置<input type="file">。

3. 将的z-index设置<input type="file">为2，使其位于样式输入/图像的顶部。

4. 最后，将的不透明度设置<input type="file">为0。<input type="file">现在将变为实际上不可见，并且样式输入/图像也会照亮，但是您仍然可以单击“浏览”按钮。如果按钮位于图像的顶部，则用户似乎单击图像并获得常规的文件选择窗口。（请注意，您不能使用“可见性：隐藏”，因为真正不可见的元素也是不可点击的，因此我们需要保持点击状态）

它包含在Jasny的bootstrap中。

可以使用以下命令创建一个简单的上传按钮

<span class="btn btn-file">Upload<input type="file" /></span>

使用fileupload插件，您可以创建更多高级小部件。看看 http://jasny.github.io/bootstrap/javascript/#fileinput