javascript - 更改输入类型 ="file"标签内容

Question

我想知道是否有任何方法可以隐藏或更改默认标签的内容:No file chosen for

<input type="file" id="myFileInput"/>

到目前为止我想到的是将其长度减半，以便显示工具提示。

$('input:file').css('width', parseFloat($($('input:file')).css('width'))/2 );

有什么想法吗？

Answer 1

您不能将输入文件设计更改为每个浏览器的 native 设计。但你仍然可以模拟它，抱歉 hacky:

See DEMO

<button id="btn_myFileInput">Choose file...</button>
<label for="btn_myFileInput">No file choosen or whatever...</label>
<input type="file" id="myFileInput" multiple />​

JS:

$(function () {
    $('#btn_myFileInput').data('default', $('label[for=btn_myFileInput]').text()).click(function () {
        $('#myFileInput').click()
    });
    $('#myFileInput').on('change', function () {
        var files = this.files;
        if (!files.length) {
            $('label[for=btn_myFileInput]').text($('#btn_myFileInput').data('default'));
            return;
        }
        $('label[for=btn_myFileInput]').empty();
        for (var i = 0, l = files.length; i < l; i++) {
            $('label[for=btn_myFileInput]').append(files[i].name + '\n');
        }
    });
});