ファイルアップロードのデザイン変更方法

javascript

ファイルアップロードのデザイン変更って面倒だと思っていたけど、案外すっきり出来た。
以下、参考にした丁寧にまとまっている記事↓

【jQuery】ファイル選択フォームデザインのカスタマイズ方法 | WebTerminal

これで一件落着と思いきや、案の定IEがダタをこねて動こうとしない。

なので今回はIEの場合は放置でそれ以外の場合だけデザインすることにした。（普通は駄目だけど）

javascript

<script>
$(function() {
  // IEの場合、フォームデザインしない
  var chkIE = function(){
      var ua = window.navigator.userAgent.toLowerCase();
      return (ua.indexOf("msie") != -1) ? true : false;
  };

  if (chkIE()) {
    $("#not_ie").remove();
    $("#ie").css('display', '');
  } else {
    $("#ie").remove();
    $("#not_ie").css('display', '');
  }
});
</script>

html

<div id="not_ie" style="display:none">
  <input style="display:none" type="file" name="data[file]" id="file_name" onchange="$('#file_text').val($(this).val());">
  <input type="text" id="file_text" readonly="readonly" value="" />
  <input type="button" value="参照..." onclick="$('#file_name').click()" />
</div>
<div id="ie" style="display:none">
  <input type="file" name="data[file]" />
</div>

cssを駆使すればIEにも対応できるっぽいけど、面倒なので今回は無しで。
後、FFの場合だとファイル名のみだけど、chromeの場合だとパスがfakepathとかになるのが少し気になるところではある・・