php - 使用 CSS 格式 type=text 按钮

Question

我正在使用修改后的输入按钮供用户上传文件。

我找到了这个 fiddle 并使用了完全相同的代码并成功生成了一个可用的 CSS 按钮。 http://jsfiddle.net/geniuscarrier/ccsGK/

<div class="fileUpload btn btn-primary">
    <span>Uploads</span>
    <input type="file" class="upload" />
</div>

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

唯一的问题是，一旦我使用按钮上传文件，通常显示在按钮右侧的命名所选文件的消息就消失了。

因此，用户无法判断文件是否已被选中。有解决办法吗？

Answer 1

使用js/jQuery 读取上传的文件名并将其作为文本放在<span></span> 中(或在任何其他地方)。

$('.upload').change(function(){
    $('.fileUpload > span').text($(this).val());
});