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

CSS

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

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





実装イメージ

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

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






HTML

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

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





connaiconnai

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






JS:ファイル名の表示

ファイル選択されたときにファイル名を表示する機能の部分です。
6行目からのfor文で、選択されたファイルすべてのファイル名を取得し表示しています。

//ファイル名を表示する
document.querySelectorAll('.deco-file input[type=file]').forEach(function(){
	this.addEventListener('change',function(e){
		let parent = e.target.closest('.deco-file')
		parent.querySelector('.file-names').innerHTML=''
		for (file of e.target.files) {
			parent.querySelector('.file-names').insertAdjacentHTML('beforeend',file.name+"<br>");
		}
	})
})





jQuery

上記のファイル名の表示をjQueryで行う場合は下記のようなコードになります。

//ファイル名を表示する
$('.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>")
    })
})






デモ

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






ソースコード全文

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

<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>
	//ファイル名を表示する
	document.querySelectorAll('.deco-file input[type=file]').forEach(function(){
		this.addEventListener('change',function(e){
			let parent = e.target.closest('.deco-file')
			parent.querySelector('.file-names').innerHTML=''
			for (file of e.target.files) {
				parent.querySelector('.file-names').insertAdjacentHTML('beforeend',file.name+"<br>");
			}
		})
	})
</script>







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

コメント

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