input type="file"をオリジナルのデザインに変更

#今回やること
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では動かないかも。。。
モダンブラウザ用で参考にしてみてくださいー！

##参考記事
jQueryのprop()でプロパティの設定･取得