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>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”の見た目を変更する方法でした。
コメント