InputFileの装飾

input type="file" のデザインをHTML＋CSS＋JQueryを使って装飾する方法。

HTMLとCSSでデザインをカスタマイズし、JQueryを使って選択したファイル名を取得する。

 

基本

 

HTML

<label for="upload" class="custom-upload">画像を選択</label>
<input type="file" id="upload" class="hidden" accept="image/*">
<span class="file__name">ファイルを選択してください</span>

 

CSS

.custom-upload {
    background-color: #f3f3f3;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block;
}

.hidden {
    display: none;
}

 

JQuery

$(function() {
    $('input[type=file]#upload').on('change', function () {
        var file = $(this).prop('files')[0];
        $('.file__name').text(file.name);
    });
});

 

 

複数対応版

HTML

<div class="upload-container">
    <label for="upload1" class="custom-upload">画像を選択</label>
    <input type="file" id="upload1" class="upload-input hidden" accept="image/*">
    <span class="file__name">ファイルを選択してください</span>
</div>

<p>&nbsp;</p>

<div class="upload-container">
    <label for="upload2" class="custom-upload">画像を選択</label>
    <input type="file" id="upload2" class="upload-input hidden" accept="image/*">
    <span class="file__name">ファイルを選択してください</span>
</div>

 

CSS

.custom-upload {
    background-color: #f3f3f3;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block;
}

.hidden {
    display: none;
}

 

JQuery

$(function() {
    $('.upload-input').on('change', function () {
        var file = $(this).prop('files')[0];
        $(this).siblings('.file__name').text(file ? file.name : 'ファイルを選択してください');
    });
});

 

siblings() メソッドを使用して、関連する .file__name 要素を選択し、ファイル名を更新。