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

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

我不确定这是否是您想要的，但这是 fiddle 的链接。
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 更改为文件名。希望这就是您所需要的。