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

Question

为什么没有用于Twitter引导程序的精美文件元素上载按钮？如果为上传按钮实现了蓝色的主按钮，那就太好了。甚至可以使用CSS精细化上传按钮吗？（似乎是无法操纵的本机浏览器元素）

Answer 1

我很惊讶没有提到该<label>元素。

解：

<label class="btn btn-primary" for="my-file-selector">

    <input id="my-file-selector" type="file" class="d-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。