如何做到input file中‘選擇檔案’的自定義

盼你歸來_仍是少年發表於2019-04-12

我們知道 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{
        //未選中任何檔案
    }
    
})
複製程式碼

大功告成！！！

相關文章