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

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/