画像添付中はボタンの色が変わるjQuery input[type=file]

すること

画像添付中の画像添付ボタンのスタイルを変える方法です。

使うもの

• jquery
• css(scss)

処理の流れ

1.添付中は特定のclassを付与
2.上記で付与されたclassのstyleがついて色が変わる
３.送信したら特定のclassを削除
４.classが削除されたことによってstyleも削除されて色が元に戻る

書くコード

nantoka.js

// 画像を添付した時に着火するイベント
$('input[type=file]').change(function () {
  $('色を変えたい要素のセレクタ').addClass('active'); //class「active」をつける
}); 

// 送信で着火するイベント
$('送信ボタンのセレクタ').submit(function () {
.done(function () {
  // ~ 送信処理省略 ~//
$('色を変えたい要素のセレクタ').removeClass('active'); // ←.doneの最後でclass削除を処理
}).fail(function () {
});

});

上記のjQueryのclass付与でstyleが効くように、cssも定義します。

nantoka.css

.btn.active{
 background-color: #38aef0; 
/* span、divなどでボタン作った方はこれ */

 color: #38aef0;
/* FontAwesomeの色変更はこっち */
}

実行結果

無事に添付ボタンの色を変更できました。
簡単にできるので、jQuery苦手なかたもチャレンジしてみてください。
小さなできたを楽しみましょう！

参考サイト

ファイルアップロードの参照ボタンの変更設定
http://php.o0o0.jp/article/jquery-upload_button