開発畑トップ   »  Javascipt   »  [CSS,Javascript]Labelを使ってFile Inputのデザインを変える!

[CSS,Javascript]Labelを使ってFile Inputのデザインを変える!

2012年03月23日

Category:Javascipt

tag: CSS , HTML , Javascript , PHP , jQuery

Label要素を使ってinput要素の「type="file"」の見た目を変えてみました!
最初はfileは非表示にしてbutton要素を別に作って、button要素をclickしたらjavascriptでfileをclickするようにしたんですが、ブラウザによって動かないものがああるので、Labelを使う方法になりました。

fileはセキュリティ的な関係でjavascriptに制限がるみたいですね。

実行サンプル

※アップロードしたファイルはPHP側で破棄しています(なんの処理もしていません)のでご安心くださいませ(^-^)



Labelを使った「Input type="file"」の見た目変更

テストしたブラウザ

  • Windows7 + IE9
  • Windows7 + FireFox11.0
  • Windows7 + Google Chrome17.0
  • Windows7 + Opera11.61
  • WindowsXP + IE8
  • Mac + Safari5.1.4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>File Post TEST</title>
<script src="http://www.google.com/jsapi"></script>
<script>
  google.load("jquery", "1.7.0", {uncompressed:true});
  google.load("jqueryui", "1.8.16", {uncompressed:true});
</script>
<script type="text/javascript">
<!--
var isFirefox = (navigator.userAgent.toLowerCase().indexOf("firefox")+1?1:0);
jQuery(function() {
  if (isFirefox) {
    jQuery('#labelId').on('click', function(){
      fileSelect();
      return false;
    });
  }
  jQuery('#fileId').on('change', function(){fileSubmit();});
});
function fileSelect() {
  jQuery("#fileId").click();
}
function fileSubmit() {
  jQuery("#insertForm").submit();
}
-->
</script>
<style type="text/css" title="text/css">
/* <![CDATA[ */
form {
  position:relative;
  margin: 10px;
}
form .hideFile {
  position: absolute;
  text-indent:-9999px;
  top:0;
  left:0;
  opacity: 0;
  -moz-opacity: 0;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
form .labelClass {
  border:1px solid #ccc;
  margin: 2px;
  padding: 2px 10px 2px 10px;
  cursor:pointer;
}
form .labelClass:hover {
  background-color: #9900;
}
form .hideSubmit {
  display:none;
}
/* ]]> */
</style>
</head>
<body>
<form action="./responce.php" class="insertForm"  target="responceSubmit" method="post" id="insertForm" name="insertForm" enctype="multipart/form-data">
  <p class="hideFile"><input type="file" id="fileId" name="fileName" /></p>
  <label for="fileId" id="labelId" class="labelClass">FILE UPLOAD</label><br />
  <input type="submit" class="hideSubmit" value="" />
</form>
<iframe src='' name='responceSubmit' id='responceSubmit'></iframe>
</body>
</html>
  • 見やすいようにJavascript,css,htmlとひとまとめにしてますが、適宜外部ファイルにしてくださいませ。
  • CSSの .labelClassで「FILE UPLOAD」ボタンの見た目を変えれます。
  • フォームはtarget属性を使って送信結果をIFrameに出力してます。これも適宜変更してくださいませ
    上記サンプルコードそのままでテストする場合は、responce.phpを作ってください。(<?php echo "OK"; ?>を記述するだけで送信成功時はIFrameに「OK」と結果が出力されます)
  • ファイルを選択したら自動でSUBMITしちゃいます。

コメントをどうぞ!