【CSS・jQuery】input type=”file”の見た目を変更する

CSS

input type=file の見た目をデフォルトから変更したい時があると思います。
しかし、inputタグへのCSS適用ではあまり見た目を変えることができません。

なので、labelタグを使用して、input type=file の見た目を変更していきます。
ファイル名を表示するためにjQueryも少しだけ使用します。





実装イメージ

今回実現したいものは、下記のように好きな見た目でファイル選択できる機能です。

選択したファイル名も表示するようにします。
複数選択にも対応できるようにします。






HTML

input type=”file” を ラベル要素で囲み さらに.deco-fileクラスで囲んでおきます。7行目はファイル名を表示する領域です。
複数選択できるように input要素にmultiple属性を付与しておきます。

jQueryもCDNで読み込んでおきます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="deco-file">
    <label>
        +ファイルを選択
        <input type="file" name="uploads[]" multiple>
    </label>
    <p class="file-names"></p>
</div>





CSS

input type=”file”を非表示にし、ラベル要素にいい感じのスタイルを適用します。

.deco-file label{
    display: inline-block;
    border: 2px solid #1E88E5;
    color: #1E88E5;
    text-align: center;
    padding: 20px 40px;
}
.deco-file label:hover{
    cursor: pointer;
}
.deco-file input[type="file"]{
    display: none;
}






jQuery

ファイル選択されたときにファイル名を表示する機能の部分です。
5行目の$.each~ の部分で、選択されたファイルすべてのファイル名を取得し表示しています。

//ファイル名を表示する
$('.deco-file input[type=file]').on("change",function(){
    let parent = $(this).closest(".deco-file")
    parent.find(".file-names").html("")
    $.each($(this).prop('files'),function(index,file){
        parent.find(".file-names").append(file.name+"<br>")
    })
})






デモ

実際に動かせるデモを用意しました。
下の『ファイルを選択』をクリックしてファイルを選択すると、ファイル名が表示されるようになっていると思います。








以上、CSSとjQueryを使用してinput type=”file”の見た目を変更する方法でした。



ソースコード全文

最後にコード全文を載せておきます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<style>
    .deco-file label{
        display: inline-block;
        border: 2px solid #1E88E5;
        color: #1E88E5;
        text-align: center;
        padding: 20px 40px;
    }
    .deco-file label:hover{
        cursor: pointer;
    }
    .deco-file input[type="file"]{
        display: none;
    }
</style>

<div class="deco-file">
    <label>
        +ファイルを選択
        <input type="file" name="uploads[]" multiple>
    </label>
    <p class="file-names"></p>
</div>


<script>
    //ファイル名を表示する
    $('.deco-file input[type=file]').on("change",function(){
        let parent = $(this).closest(".deco-file")
        parent.find(".file-names").html("")
        $.each($(this).prop('files'),function(index,file){
            parent.find(".file-names").append(file.name+"<br>")
        })
    })
</script>

コメント

タイトルとURLをコピーしました