自定義輸入按鈕顯示所選文件

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); 
} 

DEMO： http://jsfiddle.net/W2y8D/