如何作到input file中‘選擇文件’的自定義

咱們知道 input 標籤的 file 屬性，在沒有選擇文件的狀況下，其後默認顯示一條文字「未選擇任何文件」。在選擇文件後，該條文字會變成路徑和文件的名稱。

如今我遇到一個需求：想要更改「選擇文件」和「未選擇任何文件」爲英文,那該如何實現呢？

查閱了一些資料，並無直接修改的捷徑，只能使用另外一個input標籤模擬實現一個自定義效果。附上代碼以下:

HTML

<label for="uploadFile">
    <input type="button" id="btn" value="選擇文件"><span id="text">未選擇任何文件</span>
    <input type="file" name="upload" id="uploadFile">
</label>
複製代碼

CSS

label{
    position: relative;
}
#btn{
    margin-right: 5px;
}
#uploadFile{
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}

複製代碼

js

$( 'body' ).delegate( '#uploadFile', 'change', function( e ){
    if ( $(this).val() != '' ) {
        var fileName = val.substring( val.lastIndexOf( '\\' ) + 1 );//不獲取全路徑，只獲取文件名稱
        $("#text").html(fileName);
    }else{
        //未選中任何文件
    }
    
})
複製代碼

大功告成！！！