jquery - 自定义输入按钮显示所选文件

Question

默认情况下，

<input type="file">

显示一个按钮和文本，上面写着“未选择文件”，然后显示所选文件。我正在显示一个自定义按钮，因此必须隐藏不透明度为 0 的标准按钮。

如果使用自定义按钮，如何显示“未选择文件”并同时显示所选文件？

Answer 1

你可以这样做来显示选择的文件:

$(document).ready(function(){    
    $("#file").change(function(){
        getFileName($(this).attr("id"));
    });
});

getFileName = function(id){
    var str = '';
    var files = document.getElementById(id).files;
    for (var i = 0; i < files.length; i++){
        str += files[i].name;
    }
    $("#file-name").text(str);
}

演示: http://jsfiddle.net/W2y8D/