如何作到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{
        //未选中任何文件
    }
    
})
复制代码

大功告成！！！