javascript - input type="file"ラベルの内容を変更します

Question

デフォルトのラベルの内容を非表示にしたり変更したりする方法があるかどうか疑問に思いNo file chosenました。

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

これまでに思いついたのは、ツールチップが表示されるように、長さを半分に減らすことです。

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

何か案は？

Answer 1

各ブラウザのネイティブとして入力ファイルのデザインを変更することはできません。しかし、あなたはまだそれをシミュレートすることができます、申し訳ありませんがハッキー：

デモを見る

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

Answer 2

この方法で続行することもできますが、これはハックです。

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

Answer 3

Chromeもこの問題を引き起こしていました。いろいろなCSSセレクターを設定しようとしましたが、うまくいかなかったようです。しかし、私はFORM要素を使用して解決策を見つけました。

1. input [type=file]要素に名前を付けます。
2. フォーム要素に名前を付け、input [type=file]をその中に入れます。
3. スパンを作成し、フォームの入力の下に配置します。これがあなたのラベルになります。
4. CSSを使用して、入力の高さを0pxに、不透明度を0に設定します。これにより、入力が非表示になります。
5. スパンを絶対に左に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でテストしましたが、これがお役に立てば幸いです。jsfiddle http://jsfiddle.net/aressler38/L5r8L/1/