スマホでファイル指定するときのUI

よく見かけるファイルのアップロードとかあると思います。
こんなやつ。



スマホ側に表示すると小さくなって表示されるわけですが
スマホ側でファイルアドレス要らないよね。
っていうかスマホ側でファイルアドレス表示されても意味ないし。
なのでスマホ用にもっとコンパクトなヤツを作ってみた。
JQueryとBootstrap3を使ってますが、アイコン部分を適当に変えれば何でもいけると思います。

こんな感じのものです。



ファイルを選択するとアイコンが変わります。
色も変えればもっとわかりやすいと思います。

ソースはこんな感じです。

<span class="btn-group">
  <button class="btn btn-primary btn-large" type="button" onclick="$('#select').click();">
    <i id="filenotselect" class="glyphicon glyphicon-folder-open" style="color: #ffffff;"></i>
    <i id="fileselect" class="glyphicon glyphicon-cloud-upload" style="color: #ffffff; display: none;"></i>
  </button>
<input type="submit" class="btn btn-primary" value="Upload">
</span>

<input type="file" id="select" name="select" style="display: none;">

<script type="text/javascript">
$(function(){
  $('#select').change(function() {
    $('#filenotselect').toggle();
    $('#fileselect').toggle();
  });
});
</script>

JQuery