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

Question

我有一个样式化的文件输入按钮，如下所示：

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

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

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

THE JQUERY

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

我使用.text span，以便我可以将它的内部html更改为文件名。希望它是你所需要的。