bootstrapでファイルアップロードの見た目が悪いので、非表示にしてボタンに変更、ファイル名はJSで表示するようにしてみた

admin

7年前

bootstrapを適用しても、ほとんど標準と変わらない…。

こんな感じで、標準ファイル選択はdisplay:noneで非表示にして、class=”btn”でボタンっぽい表示にすればOK！

<label>
    <span class="btn",  style='margin-left:0'>
        添付ファイル
        {!!  Form::file('upload_file', ['id'=>'upload_file', 'style'=>'display:none'])  !!}
    </span>
</label>

<label>

添付ファイル

{!! Form::file('upload_file', ['id'=>'upload_file', 'style'=>'display:none']) !!}

</span>

</label>

ただ、このままだとファイル名が表示されない(display:noneで全て非表示のため)
選択されているかどうか分からないので、ファイル名はJSで表示するようにしてみた

    <script>
        // 添付ファイル名を表示
        $('#upload_file').change(function() {
            // ファイル名を取得
            var file_name = $('#upload_file')[0].files[0].name;
            var cutFigure = '20'; // カットする文字数
            var afterTxt = '...'; // 文字カット後に表示するテキスト
            // 指定サイズより長かったら、短くして...を付ける
            var trim_file_name = file_name.substr(0,(cutFigure))
            if(cutFigure < file_name.length) {
                file_name = trim_file_name + afterTxt;
            }
            $('#upload_file_name').text(file_name);
        });
    </script>

// 添付ファイル名を表示

$('#upload_file').change(function() {

// ファイル名を取得

var file_name = $('#upload_file')[0].files[0].name;

var cutFigure = '20'; // カットする文字数

var afterTxt = '...'; // 文字カット後に表示するテキスト

// 指定サイズより長かったら、短くして...を付ける

var trim_file_name = file_name.substr(0,(cutFigure))

if(cutFigure < file_name.length) {

file_name = trim_file_name + afterTxt;

}

$('#upload_file_name').text(file_name);

});

</script>

関連記事