今回やること
input type="file"はcssが反映されないため、直接スタイルの変更ができない。。
ださいデフォルトのデザインをカスタマイズして、今回は ↓ のようなデザインを実装してみたいと思います。
未選択時
選択後
html・css
html は input要素のtype="file"を非表示で設置し、その代わりとしてオリジナルボタンを設置。
<div id="js-selectFile">
<!-- 非表示にするボタン -->
<input id="js-upload" type="file" style="display:none">
<!-- オリジナルボタン -->
<button class="original_btn">ファイルを選択</button>
<!-- アイコン -->
<span class="icon">未選択</span>
</div>
/* オリジナルボタン */
.original_btn {
border: 1px solid #ddd;
padding: 10px;
cursor: pointer;
border-radius: 5px;
color: #666;
background: linear-gradient(to bottom,#fff 0,#f4f4f4 100%);
box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.09);
}
/* 未選択時のアイコン */
.icon {
font-size: 12px;
margin: 0 10px 0 15px;
padding: 3px 30px;
border-radius: 15px;
background: #666;
color: #fff;
display: inline-block;
}
/* 選択時のアイコン */
.icon.select {
background: #ff5050;
color: #fff;
}
/* ファイル名 */
.filename {
display: inline-block;
font-size: 12px;
}
js ( jQuery )
オリジナルボタンの click イベントを発火させ、ファイル選択フォームを開くようにする。
ファイル選択後はファイル情報を変数に格納し、アイコンのデザイン変更とファイル名表示の処理を行う。
$('#js-selectFile').on('click', 'button', function () {
$('#js-upload').click();
return false;
});
$('#js-upload').on('change', function() {
//選択したファイル情報を取得し変数に格納
var file = $(this).prop('files')[0];
//アイコンを選択中に変更
$('#js-selectFile').find('.icon').addClass('select').html('選択中');
//未選択→選択の場合（.filenameが存在しない場合）はファイル名表示用の<div>タグを追加
if(!($('.filename').length)){
$('#js-selectFile').append('<div class="filename"></div>');
};
//ファイル名を表示
$('.filename').html('ファイル名：' + file.name);
});
ファイル情報を変数に格納しているので、ファイルサイズ（file.size）やファイルタイプ（file.type）も出力が可能のようです。
古いIEでは動かないかも。。。
モダンブラウザ用で参考にしてみてくださいー！