除了样式文件输入按钮外，如何显示要上传的文件名？

【问题标题】：How to show the file name to be uploaded besides a styled file input button?除了样式文件输入按钮外，如何显示要上传的文件名？
【发布时间】：2014-11-02 12:33:35
【问题描述】：

我有一个这样的样式文件输入按钮：

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

使用这种样式：

.btn-file {
position: relative;
overflow: hidden;
}

.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}

它工作正常，除了按钮之外没有显示文件名，就像在无样式的文件上传按钮中一样。如何让它显示文件名？

【问题讨论】：

有小提琴吗？

标签： jquery css forms

【解决方案1】：

我不确定这是否是您想要的，但这里是小提琴的链接。
http://jsfiddle.net/91ntfwuu

HTML

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

CSS

.btn-file {
    position: relative;
    overflow: hidden;}
.text{
    background-color:red;
    border-radius:5px;
    margin: 1em;
}

.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: pointer;
display: block;
}

JQUERY

$(document).ready(function(){
    $('#fileinput').on('change', function() {
        $(".text").html( $("#fileinput").val() );
    });
});

我使用 .text 跨度，以便可以将其内部 html 更改为文件名。希望这是你需要的。

【讨论】：