更改输入类型=“文件”标签内容答案

【问题标题】：Alter input type="file" label content更改输入类型=“文件”标签内容
【发布时间】：2012-12-03 14:14:24
【问题描述】：

想知道有没有什么办法可以隐藏或者改变默认标签的内容：No file chosenfor

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

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

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

有什么想法吗？

【问题讨论】：

使用不同的浏览器...（说真的，我真的不会在那种程度上弄乱标准表单控件的默认呈现）。
这里。其中一些渲染是有充分理由的，我们现在遇到的相当多的 Web 可用性问题可以追溯到人们规避了完美的默认行为。不过，如果您需要为工作这样做，您可能没有太多选择。

标签： javascript jquery html css

【解决方案1】：

您不能将输入文件设计更改为每个浏览器的本机。但是你仍然可以模拟它，抱歉哈基：

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

【讨论】：

谢谢..这就是我要找的。span>

【解决方案2】：

你也可以这样继续，但这是一个 hack：

<input type="file" id="myFileInput" name="html" style="width: 90px;" onchange="this.style.width = '100%';"/>

【讨论】：

【解决方案3】：

Chrome 也给了我这个问题。我尝试设置各种 CSS 选择器，但似乎没有任何效果。但是，我确实通过使用 FORM 元素找到了解决方案。

为您的 input[type=file] 元素命名。
为您的表单元素命名并将 input[type=file] 放入其中。
创建一个跨度并将其放在表单中的输入下方。这将是您的标签。
使用 CSS 将输入的高度设置为 0 像素，不透明度设置为 0，这将使其不可见。
使跨度绝对定位到左侧 0px。

<style>
    #file {
        height:0px;
        opacity:0;
    }  
    #span {
        left:0px;
        position:absolute;
        cursor: pointer;
    }
</style>

<form name="form">
    <input type="file" id="file" name="file"/>
    <span id="span">My File label!!!!</span>
</form>

<script>
    var span = document.getElementById("span");

    span.onclick = function(event) {
        document.form.file.click(event);
    };

    var span = document.getElementById("span");
    span.onclick = function(event) {
        document.form.file.click(event);
    };
</script>

我在 Chrome 和 FF 中对此进行了测试，而不是 ie，但我希望这会有所帮助。 jsfiddlehttp://jsfiddle.net/aressler38/L5r8L/1/

【讨论】：