ノラWEB屋 野良人(のらんど)- 個人営業のWEB屋さん

【jQuery+CSS】ファイルの種類に合わせてアイコンを表示する

2016年5月25日

ファイルのダウンロードリンクを設置する際に、ファイルの種類にあわせてアイコンを表示させます。

アップロードファイルに合わせてアイコンを自動表示

こちらの記事で紹介した制作事例のサンプルです。

サンプルコード

jQueryで拡張子を取得してクラスを追加します。

HTML

<a href="ファイルのパス" class="hoge">これは何らかのファイルです</a>

jQuery

$(function(){
	$('.hoge').each(function(){
		var file = $(this).attr('href');
		var extention = file.split(".").pop(); // 拡張子を取得
		$(this).addClass(extention); // 拡張子をそのままクラスとして追加
	});
});

CSS

.hoge{
display: inline-block;
padding-left: 2em;
background-position: left center;
background-repeat: no-repeat;
}

.pdf{
background-image: url('img/pdf.png');
}

.doc,
.docx{
background-image: url('img/word.png');
}

例えば「拡張子が.docまたは.docxの場合は”.word”というクラスを追加」みたいな条件分岐にしてもいいんですが、CSS側でまとめて指定する方がシンプルで良いかなと思ってこうしました。

参考サイト

拡張子を取得 – Qiita
このエントリーをはてなブックマークに追加