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/